jQuery使用一个元素的文本来切换另一个包含相同文本的元素吗？

debugcn 发表于 Dev

克鲁瑟

我对jquery极为陌生，并且一直在努力创建此动作。在这方面的任何帮助将不胜感激。

我在jquery中需要一种方法，它允许用户单击一个范围并切换（即.toggle（））另一个div，该div包含与要单击的范围相同的文本，而不必为每个单独的范围重复相同的功能。

我的例子：

<ul>
<li class="sub">
  <div class="filter-row">
      <div class="row-section">
          <div class="row-heading">art</div>
              <span class="label studio-art">studio art</span>
              <span class="label ceramics">ceramics</span>
          </div>
      </div>
  </div>
</li>

<li class="sub">
  <div class="filter-row">
      <div class="row-section">
          <div class="row-heading">studio art</div>
          <span class="label">Option 1</span>
          <span class="label">Option 2</span>
      </div>

      <div class="row-section">
          <div class="row-heading">ceramics</div>
          <span class="label">Option 1</span>
          <span class="label">Option 2</span>
      </div>
  </div>
</li>
</ul>

如果用户单击包含“工作室艺术”的跨度，那么我希望将包含“工作室艺术”的div转换为“ .toggle（）”。我确实知道，我可以为要连接在一起的span和div提供一个唯一的类，例如“ .studio-art”，例如：

$(document).ready(function(){
    $("span.label.studio-art").click(function(){
        $(".row-section.studio-art").toggle();
    });

    $("span.label.ceramics").click(function(){
      $(".row-section.ceramics").toggle();
    });
});

jsfiddle示例：http：//jsfiddle.net/KCRUSHER/6qLX7/

但是我想避免做上面的事情，因为我可能有数百个这样的跨度或实例。

因此，基本上，我希望寻求帮助，以创建一个只需要跨度中的字符串即可匹配我的“行标题” div中的字符串的解决方案。这样，当单击跨度时，行节div将切换。

谢谢您事先的帮助。

萨拉瓦那

您可以div使用jQuery的filter方法查找并切换具有相同文本的所有其他元素。您必须更明智地选择班级名称，以使其有意义并易于理解。

$(document).ready(function(){
    $(".row-section span").click(function(){
    var clickedText = $(this).text();
        $(".row-section").filter(function(){
            return $(this).find("div").text() === clickedText;
        }).toggle();
    });
});

更新的小提琴：http : //jsfiddle.net/6qLX7/2/

.filter文档：http : //api.jquery.com/filter/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。