Question

我对jquery非常陌生，而且我一直在努力创造这个动作。任何有关此事的帮助将不胜感激。

我在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>

如果用户要点击包含＆＃34; studio art＆＃34;的跨度，那么我想要包含＆＃34; studio art＆＃34;的div。 to＆＃34; .toggle（）＆＃34;。我知道我可以提供一个独特的课程，如＆＃34; .studio-art＆＃34;到我想要连接在一起的span和div，例如：

$(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中的字符串来匹配我的＆＃34; row-heading＆＃34;中的字符串。 DIV。因此，当单击跨度时，行节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/。）

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

2 个答案: