使用$.data(）更改click事件的状态时出现问题

trouble using $.data() to change state for click event

本文关键字：状态 问题 事件 click data 更改 使用      更新时间：2023-09-26

大家提前感谢您。在下面的代码中，我想从一个数据值为"no"的#foodiv开始，当单击时，我应该能够执行一个操作并将值更改为"yes"。然后，当我再次点击div时，我想把值改回"no"，每次点击都会发生同样的事情。我的逻辑有什么问题，我试着用不同的方法来做，比如用attr（）。我无法完成

<div id = "foo" data-clicked="no"> #FOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO </div>
            $(document).ready( function(){

//在这里，如果数据atribute:data-clicked="no"，那么当我点击foo时，div应该将值更改为yes，并在控制台中警告"更改为yes"，它会执行

        if($("#foo").data("clicked") === "no"){
                $("#foo").on("click",function(){
                    $("#foo").data("clicked","yes");
                    alert("changed to yes")
                    console.log($("#foo").data("clicked"))
                })


        }

如果数据更改为yes，为什么下面的代码不求值为true？它不起作用

        if($("#foo").data("clicked") === "yes"){
            $("#foo").on("click",function(){
                $("#foo").attr("data-clicked", "no");
                $("#foo").data("clicked","no");
                alert("off")
                console.log($("#foo").data("clicked"))
                console.log($("#foo").attr("data-clicked"))
            })
        }
         });

我也在下面试过，但没有成功。。。我的逻辑？

                $("#foo").on("click", function(){
                if($(this).attr("data-clicked") == "no"){
                    alert("turn on");
                    $(this).attr("data-clicked", "yes") 
                }
                if($(this).attr("data-clicked") == "yes"){
                    alert("turn off")
                    $(this).attr("data-clicked", "no")
                }
            })

看起来您只是在根据原始值设置on处理程序。将逻辑放入函数中可以克服这个问题（这可以通过多种方式实现

示例1：如果使用else

jQuery(document).ready(function() {
  // over here if the data atribute: data-clicked="no" then when I click on foo the div should change the value to yes and alert "changed to yes" in the console, which it does
  jQuery("#foo").on("click", function() {
    if ($(this).data("clicked") === "no") {
      jQuery(this).data("clicked", "yes");
      alert("changed to yes");
      console.log(jQuery(this).data("clicked"))
    } else if ($(this).data("clicked") === "yes") {
      jQuery(this).data("clicked", "no");
      alert("off");
      console.log(jQuery(this).data("clicked"));
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo" data-clicked="no">#FOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO</div>

示例2：使用切换语句

jQuery(document).ready(function() {
  // over here if the data atribute: data-clicked="no" then when I click on foo the div should change the value to yes and alert "changed to yes" in the console, which it does
  jQuery("#foo").on("click", function() {
    switch ($(this).data("clicked")) {
      case "no":
        jQuery(this).data("clicked", "yes");
        alert("changed to yes");
        console.log(jQuery(this).data("clicked"))
        break;
      case "yes":
        jQuery(this).data("clicked", "no");
        alert("off");
        console.log(jQuery(this).data("clicked"));
        break;
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo" data-clicked="no">#FOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO</div>

只需这样做即可。

<div clicked='no'> </div>
$('#foo').on('click', function(){
  $('#foo').attr('clicked') == 'no' ? $('#foo').attr('clicked', 'yes') : $('#foo').attr('clicked', 'no');
}

关于此方法，请参阅：http://api.jquery.com/attr/

相关文章：