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

示范

Answer 2

利用

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

演示：小提琴

Answer 3

尝试这个 -

$("#main > .item").click( function () {
    if ($.trim($(this).next('.text').text()) == "") {
        var currentext = $(this).data("text");
        $(this).next('.text').text(currentext);
    } else {
        $(this).next('.text').text("");
    }
});

演示---> http://jsfiddle.net/ws3FQ/5/