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

Question

我对jquery非常陌生，我一直在努力创建这个操作。如果能在这件事上提供任何帮助，我们将不胜感激。

我需要jquery中的一种方式，允许用户单击span并切换另一个div (即.toggle())，该div包含与被单击的span相同的文本，而不必对每个跨重复相同的函数。

我的例子：

<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“的span，那么我希望包含"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/

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

因此，基本上，我希望帮助创建一个解决方案，该解决方案只需要一个span中的字符串来匹配我的“行标题”div中的字符串。这样，当单击span时，行段div将切换。

谢谢你提前提供帮助。

Answer 1

通过使用jQuery的div方法并切换它们，您可以找到具有相同文本的所有其他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/

Answer 2

我没有测试这个，但它应该能用。

$(document).ready(function(){
  $("span.label").click(function(){
    var checkText = $(this).html();
    $( ".row-section:contains('"+checkText+"')" ).each(function(index,element){
      // This checks for exact match. If you want any "containing" match, remove the if-clause
      if($(element).html() == checkText) {
        $(element).toggle();
      }
    });
  });
});

如果这有帮助的话请告诉我。

P.S.！此函数区分大小写(有关更多细节，请参见http://api.jquery.com/contains-selector/ )。