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

Question

我对 jquery 非常陌生，我一直在努力创建这个 Action 。对此问题的任何帮助将不胜感激。

我需要 jquery 中的一种方法，允许用户单击一个跨度并切换(即 .toggle() )另一个包含与单击的跨度相同文本的 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>

如果用户要单击包含“studio art”的范围，那么我希望包含“studio art”的 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 将切换。

感谢您提前提供的任何帮助。

Answer 1

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

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

更新的 fiddle :http://jsfiddle.net/6qLX7/2/

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