Question

每个人都提前感谢你。在下面的代码中，我想从一个数据值为“no”的#foo div开始，当点击时我应该能够执行操作并将值更改为“yes”。然后，当我再次点击div时，我想将值更改回“no”，每次点击都会发生同样的事情。我的逻辑出了什么问题我尝试用不同的方式来做，比如使用attr（）。我无法完成它

<div id = "foo" data-clicked="no"> #FOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO </div>

            $(document).ready( function(){

//在这里，如果数据属性：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，为什么以下代码无法评估为真？它不起作用

        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")
                }

            })

Answer 1

看起来您只是根据原始值设置on处理程序。将逻辑放在函数中克服了这个问题（这可以通过多种方式完成。请参阅下面的示例

示例1：使用else if

＆＃13;

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"));
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo" data-clicked="no">#FOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO</div>

＆＃13;

示例2：使用switch语句

＆＃13;

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;
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo" data-clicked="no">#FOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO</div>

＆＃13;

Answer 2

你可以这样做。

<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/

使用$ .data（）更改click事件的状态时遇到问题

2 个答案: