jQuery使用元素的文本来切换包含相同文本的另一个元素？ [英] jQuery Use the text of an element to toggle another element that contains the same text?

问题描述

我对jquery非常新，我一直在努力创建这个动作。任何帮助在这件事情将非常感谢。

I'm extremely new to jquery and I've been struggling to create this action. Any help in this matter will be greatly appreciated.

我需要一种方法在jquery中，允许用户单击一个跨度和切换（即。toggle（））另一个div，其中包含与单击的span相同的文本，而不必为每个单独的span重复相同的函数。

I need a way in jquery that allows a user to click a span and toggle (i.e .toggle()) another div that contains the same text as the span being clicked, without having to repeat the same function for each individual 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到.toggle（）。我知道我可以给一个独特的类，如.studio-art到我想连接在一起的span和div，例如：

If a user were to click the span that contains "studio art", then I want the div that contains "studio art" to ".toggle()". I do know that I could give a unique class such as ".studio-art" to the span and div that i want to connect together, such as:

$(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/

Jsfiddle example: http://jsfiddle.net/KCRUSHER/6qLX7/

但我想避免做我以上的事，因为我可能有几百个跨度或像这样的实例。

But I want to avoid doing what I have above since I may have hundreds of spans or instances like this.

所以基本上我希望帮助创建一个解决方案，只需要一个span中的字符串匹配我的字符串row-headingdiv。因此，当单击span时，行部分div将切换。

So basically I'm hoping for help to create a solution that only needs the string in a span to match the string in my "row-heading" div. So that when a span is clicked the row-section div will toggle.

感谢您提前的帮助。

推荐答案

您可以使用jQuery的过滤器 div c $ c>方法并切换它们。

You can find all other div elements with the same text by using jQuery's filter method and toggle them. You'll have to pick your class names more sensibly to make sense and easier to understand.

$(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/

这篇关于jQuery使用元素的文本来切换包含相同文本的另一个元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！