充当单选按钮的按钮

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

描述
基本上，这将使用btns类遍历div所有按钮，然后从所有按钮中删除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!");
}

小提琴

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()此设置正常运行，您要做的全部工作就是在每个callFruit()函数的末尾添加一个document.getElementById('_set1_allclear').checked=true;

如果愿意，也可以将其放入onclick中。

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