Question

我有6个按钮，如果用户点击相应状态切换为true的按钮，我给每个按钮默认状态为false。现在，如果我切换按钮，则所有其他按钮状态将切换为false。

这样的东西有效但是对于许多按钮来说这是一个很好的编码方式，我不想重复那么多：

    toolOneStatus = false
    $('#btn-tool-one').click(function() {
        toolOneStatus = true;
        toolTwoStatus = false; ....
    }

Answer 1

您可以使用.data()。检查下面的代码段......

＆＃13;

$('button').click(function(){
    alert('status ' + $(this).data('status'));
    if($(this).data('status')=="false"){
        //do this
    } else {
        //do this
    }
    $(this).data('status','true')
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" data-status="false">Button1</button>
<button type="button" data-status="false">Button2</button>
<button type="button" data-status="false">Button3</button>
<button type="button" data-status="false">Button4</button>
<button type="button" data-status="false">Button5</button>
<button type="button" data-status="false">Button6</button>

＆＃13;

Answer 2

您可以使用单个click功能，并通过data-no属性识别按钮。

此示例为活动按钮添加蓝色，而其他所有按钮保持灰色。 activeButton变量表示活动按钮的编号。

＆＃13;

var activeButton = 0;
$('.mybtns').click(function() {
    activeButton = $(this).data('no');
    console.log('active='+activeButton);
    $('.mybtns').css('background-color','rgb(221, 221, 221)');
    $(this).css('background-color','lightblue');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="mybtns" data-no="1">Test1</button>
<button class="mybtns" data-no="2">Test2</button>
<button class="mybtns" data-no="3">Test3</button>
<button class="mybtns" data-no="4">Test4</button>
<button class="mybtns" data-no="5">Test5</button>
<button class="mybtns" data-no="6">Test6</button>
<button class="mybtns" data-no="7">Test7</button>

＆＃13;

Answer 3

要遍历每个按钮并为每个按钮执行一些代码，您可以使用jquery中可用的恰当命名的.each()函数。您可以在此处找到相关文档 - each()

每当点击一个按钮时，.each()会为class=buttons的所有元素执行该功能，并设置status=false。在函数内部，您可以使用$(this)选择器来选择当前迭代的对象。最后，在循环之外，触发事件的按钮被赋予status=true。

$('button').click(function() {
  $(".buttons").each(function(index) {
    // Looping through each element having class "buttons"
    $(this).data("status", "false"); //Setting every button to false.
    $(this).next().html($(this).data("status"));
  });
  $(this).data("status", "true"); // Outside the loop, setting status true for the button which triggered the click event.
  $(this).next().html($(this).data("status"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="buttons" id="button1" data-status="false">Button1</button><span id="p1"></span>
<button type="button" class="buttons" id="button2" data-status="false">Button2</button><span id="p2"></span>
<button type="button" class="buttons" id="button3" data-status="false">Button3</button><span id="p3"></span>
<button type="button" class="buttons" id="button4" data-status="false">Button4</button><span id="p4"></span>

单击时Jquery更改按钮的状态

3 个答案: