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

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

您可以将一个变量维护为标志：

$(document).ready(function(){
  var flag = true;
  $(".hold").click(function(){
    if(flag){
      alert('1');
      flag = false;
    }
    else{
      alert('0');
      flag = true;
    } 
  });
});

<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">Test</i></a>

Answer 2

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

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

Answer 3

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

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

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 5

如果您只想在第二次点击时显示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 6

这将显示0或1，具体取决于您单击的时间。

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

Answer 7

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 8

以下将为您完成工作。

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

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 10

我用解决方案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>