按钮的行为类似于单选按钮

Buttons to behave as an Radio buttons

本文关键字：类似于 单选按钮 按钮      更新时间：2023-09-26

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

对于这个例子，我想做的是，当一个按钮处于活动状态时：例如，苹果按钮处于激活状态，它启动了一个功能，香蕉和梨按钮应该处于非激活状态，不启动其功能，反之亦然（此外，活动按钮应该用不同的颜色着色）

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

$(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>

我觉得，对于每个不同的按钮功能，我需要创建一个"非活动"类。此外，我一直试图查找是否有.toolghClass（'inactive'）或.inactive，但未能找到正确的答案。

jsFiddle

描述
基本上，这将迭代div中具有btns类的所有按钮，然后从所有按钮中删除active类。从这里，它将向单击的按钮添加activecss类。

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

使用.btn选择器以所有三个按钮为目标，例如$('.btn')。这比必须为每个id声明点击事件更容易维护。

$(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

只需几行代码就可以实现这一点。使用.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;。

我个人会放弃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中。

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

相关文章：