Question

我目前正在使用两个按钮（Go，Stop）来调用和启用/禁用我的功能。但是可以使用一个按钮来调用该功能来禁用或启用。例如，单击该按钮将使其变为蓝色，这将启用该功能，再次单击该按钮将使其变为白色，这将禁用该按钮。

我目前的代码是：

<button id="go">Go</button>
<button id="stop">STOP!</button>
<div class="block"></div>
   <style>
  #draggable {
   width: 150px;
    height: 150px;
     padding: 0.5em;
     top:5%;
     left: 5%; }
  </style>
<script>
// Start animation
$( "#go" ).click(function() {
  $( ".block" ).draggable();
});
// Stop animation when button is clicked
$( "#stop" ).click(function() {
$( ".block" ).draggable( "disable" );
});
$( "#go" ).click(function() {
$( ".block" ).draggable( "enable" );
});

</script>
<button id="go">Go</button>
<button id="stop">STOP!</button>
<div class="block"></div>
   <style>
  #draggable {
   width: 150px;
    height: 150px;
     padding: 0.5em;
     top:5%;
     left: 5%; }
  </style>
<script>
// Start animation
$( "#go" ).click(function() {
  $( ".block" ).draggable();
});
// Stop animation when button is clicked
$( "#stop" ).click(function() {
$( ".block" ).draggable( "disable" );
});
$( "#go" ).click(function() {
$( ".block" ).draggable( "enable" );
});

</script>

Answer 1

当然，您需要的只是跟踪状态，如旗帜

$("#go").on('click', function () {

    var flag = $(this).data('draggable');

    $(".block").draggable( flag ? 'disable' : 'enable' );

    $(this).data('draggable', !flag);
});

FIDDLE

Answer 2

可以在点击功能

中尝试jquery

$(this).toggleclass("stop")
*insert code to test if class is stop"

使用一个按钮启用和停止功能而不是两个按钮

2 个答案: