Question

我有许多不同的按钮可以触发不同的功能。在这个例子中，我创建了总共3个按钮，每个按钮触发不同的功能。我想远离使用单选按钮本身的原因是因为在某个时间点，必须有两个按钮处于活动状态。

对于这个例子，我想要做的是，当一个按钮处于活动状态时：例如，Apple按钮处于活动状态并且它触发一个函数，Banana和pear按钮应该不处于活动状态并且不会激活其功能，反之亦然（此外，活动按钮应以不同的颜色着色）

我怎样才能做到这一点？到目前为止，这是我的代码：

$(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'）或.inactive但未能找到正确的答案。

Answer 1

jsFiddle

<强>描述
基本上，这将迭代div中btns类的所有按钮，然后它将从所有按钮中删除类active。从这里开始，它会将active css类添加到单击的按钮中。

<强> 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
  });
});

Answer 2

利用您的.btn选择器定位所有三个按钮，例如$('.btn')。哪个比为每个id声明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!");
}

Fiddle

Answer 3

您可以使用几行代码完成此操作。使用.on()附加单击事件处理程序。在活动内部，使用.removeClass()从当前可能处于的任何按钮中移除活动类。然后使用.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;。

Answer 4

我个人会放弃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()函数的末尾添加document.getElementById('_set1_allclear').checked=true;

，即可完成此设置。

如果你愿意的话，你也可以把它扔进onclick。

编辑：忘了实际锁定，而不仅仅是提供锁定交易机制。 Woops。

按钮表现为单选按钮

4 个答案:

jsFiddle