Javascript 使用$.data（）更改单击事件的状态时出现问题

大家先谢谢你。在下面的代码中，我想从一个数据值为no的foodiv开始，当单击时，我应该能够执行一个操作并将该值更改为yes。然后，当我再次单击div时，我想将该值更改回no，并且每次单击都会发生相同的情况。我的逻辑有什么问题？我尝试了不同的方法，比如使用attr。我做不到

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

            $(document).ready( function(){

如果数据更改为是，为什么下面的代码不计算为真？它不起作用

我也在下面试过，但没用。。。我的逻辑

                $("#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")
                }

            })

---

看起来您只是在基于原始值设置处理程序。 将逻辑放在函数中可以克服这个问题，这可以通过多种方式实现。见下面的例子

示例1：使用else if

jQuerydocument.readyfunction{ //在这里，如果数据atribute:data clicked=no，那么当我单击foo时，div应该在控制台中将值更改为yes，并将alert更改为yes，它会这样做 jQueryfoo.onclick，函数{ 如果$this.dataclicked==否{ jQuerythis.dataclicked，是； 警报更改为是； console.logjQuerythis.dataclicked }否则，如果$this.dataclicked===是{ jQuerythis.dataclicked，否； 警报关闭； console.logjQuerythis.dataclicked； } }; };

---

oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

<div clicked='no'> </div>

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

---

请参阅此方法：

jQuery的数据不会更改属性，它会更改jQuery中的内部存储。如果这只是为了创建一个切换函数，那么很好，如果需要更改实际属性，那么必须使用attr。代码的问题是，您正在检查单击处理程序外部的数据，每次单击时，它都需要在该处理程序内部进行检查。我想更改属性是因为我想为元素指定值on off开关。使用.attr还是数据更容易？我希望能够通过我的代码将这些信息用于条件语句。感谢您的光临，我正在检查点击处理程序中的数据，但我猜数据不会在点击处理程序之间传输，否则如果方法真的有用，我几乎从未使用过其他如果。我想我可以在两个独立的if语句中完成为什么我不能完成它。你能在点击处理程序中给我看两个不同的if语句吗？我认为这会很有帮助。我知道效率不高，但我正在学习。很好的回答，我会接受。我可以在if语句中使用$this.data而不是jQueryfoo。我想知道为什么你不能使用两个单独的if语句，因为如果第一个if语句发现no，它会将其更改为yes，然后第二个if语句会运行并将其更改回no。这就是为什么我使用else if，但实际上更稳健的方法可能是使用switch语句，如我在示例2中所述。我没有想到，但你当然应该这样做。将更新答案

                $("#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")
                }

            })

<div clicked='no'> </div>

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