使用$ .data（）更改點擊事件的狀態時遇到問題

大家都事先感謝您。在下面的代碼中，我想從#foo div開始，數據值=「no」，點擊後我應該能夠執行操作並將值更改爲「yes」。然後，當我再次單擊div時，我想將值更改回「否」，並且每次點擊都會發生同樣的情況。我的邏輯出了什麼問題，我試圖用不同的方式來使用attr（）。我不能把它做

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

      $(document).ready(function(){

//在這裏，如果數據屬性附加傷害：data-clicked="no"然後當我點擊FOO股利應在控制檯的值更改爲yes和警報「更改爲是」，這它

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




     }

如果數據更改爲是爲什麼犯規下面的代碼evalute爲真？它不工作

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

      })

來源

2015-02-07 jack blank

jQuery的'data'不改變屬性，它改變了jQuery的內部存儲。如果這只是創建切換功能，那很好，如果您需要更改實際屬性，則必須使用'attr'。你的代碼的問題是你正在檢查點擊處理程序之外的數據，它需要在每次點擊發生時檢查它。 – adeneo 2015-02-07 10:44:14

我想改變屬性，因爲我想分配值（關閉開關）元素更容易用.attr（）或data（）來做到這一點？我希望能夠通過我的代碼將條件聲明用於這些信息。感謝您的支持 – 2015-02-07 10:48:54

即時檢查點擊處理程序中的數據，但我猜數據不會在點擊處理程序 – 2015-02-07 10:55:09

看起來你只是根據原始值設置on處理程序。把邏輯函數內部克服了這個問題（這可以以多種方式來完成，請參閱下面的實施例

實施例1：使用否則如果

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>

來源

2015-02-07 11:06:57 wnbates

之間傳輸，否則如果方法真的幫助我很少使用'else if'。我以爲我可以在兩個單獨的語句中做到這一點，爲什麼我不能這樣做。你能告訴我兩個不同的if語句在click處理程序中，我認爲這會有所幫助。我知道這不是有效的，但即時學習。好的答案我會接受。 – 2015-02-07 11:14:33

，我可以在if語句中使用'$（this）.data'而不是jQuery（「＃foo」）。我想知道爲什麼你沒有使用 – 2015-02-07 11:19:00

你不能用兩個單獨的if語句來完成它，因爲如果第一個語句發現「否」，它會將其更改爲「yes」，那麼第二個if語句將運行並更改它回到「否」。這就是爲什麼我使用其他方法的原因，但實際上更強大的方法可能是使用switch語句，如我在示例2中所示。 – wnbates 2015-02-07 11:23:25

只要你能做到這一點。

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

來源

2015-02-07 11:25:08

使用$ .data（）更改點擊事件的狀態時遇到問題

回答

相關問題