Jquery 如何使用变量切换多个元素

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

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

试试这个-

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

演示

-->

试试这个-

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

---

演示

-->

您可以使用

数据

功能将数字附加到元素：

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

---

您可以使用

数据

功能将数字附加到元素：

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

使用

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

演示：

使用

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

---

---

演示：

最干净的解决方案，尽管我更喜欢

if（$（this）.data（'toggled'））

或

if（toggled）

，就像您所希望的那样。@Christoph-Right。我试图修复OP的问题，这似乎是切换变量与元素的附件。这样做会使它更直观，重命名变量，并使其成为布尔值：。是的，这是一个很好的解决方案。@zsawyer还可以编写

$（this）.data（'showing'，！showing）@Christoph是一个非常好的建议！感谢最简洁的解决方案，尽管我更喜欢
if（$（this）.data（'toggled'））
或
if（toggled）
，正如您所希望的那样。@Christoph-Right。我试图修复OP的问题，这似乎是切换变量与元素的附件。这样做会使它更直观，重命名变量，并使其成为布尔值：。是的，这是一个很好的解决方案。@zsawyer还可以编写
$（this）.data（'showing'，！showing）@Christoph是一个非常好的建议！感谢您的解释，以及为什么用
var$this=$（this）混淆代码？当您仍然使用
$（此）
时？@zsawyer始终无法解释所有内容，作为用户，OP有责任尝试理解解决方案，如果有任何疑问，他/她可以在评论中询问他们。这里的解决方案几乎是自我的explanatory@zsawyer我编写的新代码重用了
$this
，但没有更新现有代码base@zsawyer我同意Arun的观点，解释$this似乎是不必要的（即使可以根据要求进行）。这里的-1似乎很苛刻，你刚刚证明了我的观点。我没有要求澄清
$this
，因为它与解决方案完全无关。解决方案与您的类似。除了你用一句简洁准确的话指出了你所做的事情，并且只在关键/需要的地方修改了ops代码。-1是因为混淆和缺乏对重要变化的解释/暗示。没有解释，以及为什么用
var$this=$（this）混淆代码？当您仍然使用
$（此）
时？@zsawyer始终无法解释所有内容，作为用户，OP有责任尝试理解解决方案，如果有任何疑问，他/她可以在评论中询问他们。这里的解决方案几乎是自我的explanatory@zsawyer我编写的新代码重用了
$this
，但没有更新现有代码base@zsawyer我同意Arun的观点，解释$this似乎是不必要的（即使可以根据要求进行）。这里的-1似乎很苛刻，你刚刚证明了我的观点。我没有要求澄清
$this
，因为它与解决方案完全无关。解决方案与您的类似。除了你用一句简洁准确的话指出了你所做的事情，并且只在关键/需要的地方修改了ops代码。1是因为混淆和缺乏对重要变化的解释/暗示。