У меня много разных кнопок, которые запускают разные функции. В этом примере я создал всего 3 кнопки, каждая из которых выполняет свою функцию. Причина, по которой я хочу отказаться от использования переключателей, заключается в том, что в определенный момент времени две кнопки должны быть активными.

В этом примере я хочу, чтобы кнопка была активна: например, кнопка Apple активна, и она запускает функцию, кнопка банана и груши должна быть неактивной и не запускать ее функции, и наоборот (также активна кнопка должна быть затенена другим цветом)

Как я могу этого добиться? Вот мой код:

$(document).ready(function() {
  $('#AppleBTN').click(function() {
    apple();
    if ($(this).hasClass('active')) {}
    $(this).toggleClass('active');
  });

  $('#BananaBTN').click(function() {
    banana();
    if ($(this).hasClass('active')) {}
    $(this).toggleClass('active');
  });

  $('#PearBTN').click(function() {
    pear();
    if ($(this).hasClass('active')) {}
    $(this).toggleClass('active');
  });
});

function apple() {
  alert('apple');
}

function banana() {
  alert('banana');
}

function pear() {
  alert('pear');
}
.btn {
  background: #3498db;
  border-radius: 0px;
  font-family: Arial;
  color: #ffffff;
  font-size: 12px;
  padding: 2px 2px 2px 2px;
  text-decoration: none;
  height: 30px;
  width: 70px;
}
.btn.active,
.btn:active {
  background: #124364;
  text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" class="btn" id="AppleBTN">Apple</button>
<button type="button" class="btn" id="BananaBTN">Banana</button>
<button type="button" class="btn" id="PearBTN">Pear</button>

Я чувствую, что для каждой отдельной функции кнопки мне нужно создать класс «неактивный». Кроме того, я пытался посмотреть, есть ли .toggleClass ('неактивный') или .inactive, но не смог найти правильный ответ.

0
axchink 15 Дек 2015 в 22:54

4 ответа

Лучший ответ

Используйте селектор .btn для выбора всех трех кнопок, например, {{Х1}} . Что более удобно, чем объявление события click для каждого идентификатора.

$(document).ready(function() {
  $('.btn').click(function() {
    // remove active class except for the selected button
    $('.btn').not(this).removeClass('active'); 
    $(this).toggleClass('active');

    // get the id of the button element
    var id = $(this).attr("id"); 
    if (id == "AppleBTN")
        appleFunction();
    else if (id == "BananaBTN")
      bananaFunction();
    else if (id == "PearBTN")
      pearFunction();
  });
});

Ваши разные функции.

function appleFunction() {
  alert("apple!");
}

function bananaFunction() {
  alert("banana!");
}

function pearFunction() {
  alert("pear!");
}

Скрипка

1
Robin Carlo Catacutan 15 Дек 2015 в 20:08

Я бы лично отказался от фантазии и задания в классе JQ и просто стал бы родным.

Образец HTML:

<input type="radio" id="_set1_allclear" disabled hidden name="_set1" />

<input type="radio" disabled hidden name="_set1" />
<button type="button" onclick="if(document.getElementById('_set1_allclear').checked){ this.previousElementSibling.checked=true; callApple();}">Apple</button>
<input type="radio" disabled hidden name="_set1" />
<button type="button" onclick="if(document.getElementById('_set1_allclear').checked){ this.previousElementSibling.checked=true; callOrange();}">Orange</button>

Оттуда вы можете стилизовать кнопки с помощью этого CSS:

button { /*default button style*/ }
#_set1_allclear ~ button { /*inactive button style*/ }
:checked + button { /*active button style*/ }

Все, что вам нужно сделать, чтобы полностью запустить эту настройку, это добавить в конец каждой из ваших callFruit() функций a document.getElementById('_set1_allclear').checked=true;

Вы также можете добавить это в onclick, если хотите.

РЕДАКТИРОВАТЬ: Забыл фактически заблокировать, а не просто предоставить механизм торговли замком. Woops .

1
abluejelly 15 Дек 2015 в 20:23

jsFiddle

< Сильный > Описание
В основном это будет повторять все кнопки в div с классом btns, затем он удалит класс active из всех кнопок. Отсюда он добавит класс active к нажатой кнопке.

HTML

<div class="btns">
  <button type="button" class="btn" id="AppleBTN">Apple</button>
  <button type="button" class="btn" id="BananaBTN">Banana</button>
  <button type="button" class="btn" id="PearBTN">Pear</button>
</div>

JS

$(document).ready(function() {
  $('.btn').click(function() {
    $('.btns > button').removeClass('active');
    $(this).addClass('active');
    // if you need to call a function you can pull any attribute of the button input
  });
});
2
abc123 15 Дек 2015 в 20:12

Вы можете сделать это с помощью нескольких строк кода. Присоедините обработчик событий click , используя .on(). Внутри события удалите класс active из любой кнопки, на которой он в данный момент находится, используя {{ X1 } }. Затем добавьте класс active в текущий выбор с помощью .addClass(),

$(function () {
    $('.btn').on('click', function () {
        $('.btn').removeClass('active');
        $(this).addClass('active');
    });
});
.btn {
    background: #3498db;
    border-radius: 0;
    font-family: Arial;
    color: #fff;
    font-size: 12px;
    padding: 2px;
    text-decoration: none;
    height: 30px;
    width: 70px;
}
.btn.active, .btn:active {
    background: #124364;
    text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn" id="AppleBTN">Apple</button>
<button type="button" class="btn" id="BananaBTN">Banana</button>
<button type="button" class="btn" id="PearBTN">Pear</button>

Примечание: я также упростил некоторые из ваших CSS в приведенном выше примере. При указании цвета, в котором три набора шестнадцатеричных цифр совпадают, вы можете указать один символ для каждой из трех частей (т. Е. #ffffff стал #fff). Кроме того, при указании значения 0 нет необходимости указывать единицу, чтобы border-radius: 0px стал border-radius: 0. Наконец, когда все ваши значения заполнения такие же, как padding: 2px 2px 2px 2px;, вы можете упростить это до padding: 2px;.

1
War10ck 15 Дек 2015 в 20:20