Question

代码：

<a href="javascript:void(0);" class="btn btn-sm btn-outline-info hold" title="Hold"><i class="icon-control-pause"></i></a>
<script>
    $(document).ready(function(){
        $(".hold").click(function(){
            alert('1');
        });
    });
</script>

我有一个按钮现在，我想要的是第一次单击它会提醒1，而第二次单击时它会显示0。我不知道该怎么办？请帮助我。

谢谢

Answer 1

您可以将一个变量保留为标志：

react/js/___.js

Answer 2

您的意思是这样吗？只需使用一个变量来跟踪当前状态：

$(document).ready(function() {
  var alertNumber = 1;
  $(".hold").click(function() {
    alert(alertNumber);
    alertNumber = 1 - alertNumber;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><button class="hold">Click me!</button></div>

Answer 3

var clickedTimes = 0;
$(".hold").click(function(){
  clickedTimes++;
  alert(clickedTimes % 2 == 0 ? '1' : '0');
});

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<a href="javascript:void(0);" class="btn btn-sm btn-outline-info hold" title="Hold"><i class="icon-control-pause"></i>Test</a>

Answer 4

如果您只想在第二次点击时显示0，则保留点击次数，并检查用户是否两次单击。

var clickCount = 0;
$(".hold").click(function(){
  clickCount++;
  var alertZeroOnlyOnTheSecondClick = clickCount == 2 ? '0' : '1'
  alert(alertZeroOnlyOnTheSecondClick);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="javascript:void(0);" class="btn btn-sm btn-outline-info hold" title="Hold"><i class="icon-control-pause"></i>Test</a>

Answer 5

这将根据您单击的时间显示0或1。

var _click = 0;
$('.hold').on('click', function() {
    _click = _click == 0 ? 1 : 0;
    alert(_click);
});

Answer 6

Use logical not operator so as to toggle between true and false

$(document).ready(function() {
    let text = false;

    $('.hold').click(function() {
        text =  !text;
        alert(Number(text));
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="javascript:void(0);" class="btn btn-sm btn-outline-info hold" title="Hold"><i class="icon-control-pause"></i>Click Me</a>

Answer 7

以下内容将为您完成工作。

$(document).ready(function() {
  var alertNumber = false;
  $(".hold").click(function() {
    alertNumber === true ? alert(1) : alert(0);
    alertNumber = !alertNumber; // alertNumber is now the opposite of what it was.
  });
});

Answer 8

var msg = 0;
    $(document).ready(function(){
        $(".hold").click(function(){
            alert((++msg) % 2);
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<a href="javascript:void(0);" class="btn btn-sm btn-outline-info hold" title="Hold"><i class="icon-control-pause">Toggle Alert</i></a>

Answer 9

我可以使用解决方案 val =！val 来实现，但是对于具体情况，还有另一个想法：

<a href="#" class="btn btn-sm btn-outline-info hold" title="Hold"><i class="icon-control-pause"></i></a>
<script>
    $(document).ready(function(){
        var i = 1;
        $(".hold").click(function(){
            alert( i );
            i—-;
        });
    });
</script>

Answer 10

使用数据属性的另一种方式。问候

$(document).ready(function(){
  $(".hold").click(function(){
    alert($(this).data('clicked'));
    $(this).data('clicked', 
    $(this).data('clicked')=='0' ? '1' : '0')
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<a href="javascript:void(0);" data-clicked="0" class="btn btn-sm btn-outline-info hold" title="Hold"><i class="icon-control-pause">Toggle Alert</i> </a>

如何显示0和1 onclick同一按钮？

10 个答案: