jquery - 如何使用变量来切换多个元素

Question

我有一个代码，它从图像或 div 中获取数据文本属性，并将其显示为不同 div 中的描述。我正在使用一个变量来确定文本是否显示。当有更多元素时，这是一个问题，因为变量由所有可切换元素共享。我希望代码能够处理分配了类的所有 div/图像，但我不知道如何使用变量解决问题。请参阅jsfiddle为了更好地理解我正在讨论的内容。

var toggled = 0;

$("#main > .item").click(
  function () {
    if(toggled == 0){
      var currentext = $(this).data("text");
      $(this).parent("div").children("div.text").text(currentext);
      toggled ++;
    }
    else{
      $(this).parent("div").children("div.text").empty();
      toggled --;
    }
});

Answer 1

您可以使用data函数将数字附加到元素:

$("#main > .item").click(
  function () {
    var toggled = $(this).data('toggled')||0;
    if(toggled == 0){
      var currentext = $(this).data("text");
      $(this).parent("div").children("div.text").text(currentext);
      toggled ++;
    }
    else{
      $(this).parent("div").children("div.text").empty();
      toggled --;
    }
    $(this).data('toggled', toggled);
});

Demonstration