如何显示与jquery中单击的li相同的li类？

Question

我在WordPres中有动态列表，每个<li>都有一个类。 我无法控制class="woof_list woof_list_radio"中的内容，因为它是由插件生成的。

<ul class="woof_list woof_list_radio">

    <li class="woof_term_224">
        <label class="woof_radio_label " for="woof_unselect">Parent 1</label>
    </li>
    <br>
    <li class="woof_term_225">
        <label class="woof_radio_label " for="woof_unselect">Parent 2</label>
    </li>
    <br>
    <li class="woof_term_226">
        <label class="woof_radio_label " for="woof_unselect">Parent 3</label>
    </li>

</ul>

<br>

<ul class="banner-info-list">

    <li class="woof_term_224" style="display: none;">
        <h1 class="et_pb_module_header">Title 1</h1>
        <span class="et_pb_fullwidth_header_subhead">Content 1</span>
    </li>

    <li class="woof_term_225" style="display: none;">
        <h1 class="et_pb_module_header">Title 2</h1>
        <span class="et_pb_fullwidth_header_subhead">Content 2</span>
    </li>

    <li class="woof_term_226" style="display: none;">
        <h1 class="et_pb_module_header">Title 3</h1>
        <span class="et_pb_fullwidth_header_subhead">Content 3</span>
    </li>

</ul>

我想在class="woof_list woof_list_radio"点击<li>中的<li> inside class =“banner-info-list class="woof_list woof_list_radio"

例如：如果我单击Parent 1 <label> ，我想显示其内容

<li class="woof_term_226" style="display: none;">
        <h1 class="et_pb_module_header">Title 3</h1>
        <span class="et_pb_fullwidth_header_subhead">Content 3</span>
 </li>

因为它们具有与woof_term_226相同的类

这是我当前的jquery代码，但还没有完成：

j('.woof_list_radio .woof_radio_label').click(function(e) {
    e.preventDefault();
    var firstClass =  j(this).attr('class');

    console.log(firstClass);
    j(firstClass).show('slow').siblings().hide('slow');
}); 

Answer 1

您可以在每次单击时获取类名属性，并在.banner-info-list选择器上使用它来查找您需要显示的li：

 $(document).on("click", ".woof_list_radio .woof_radio_label", function() { var classAttr = $(this).closest("li").attr("class") $(".banner-info-list li[class^='woof_term_']").hide() $(".banner-info-list").find("."+classAttr).show() }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="woof_list woof_list_radio"> <li class="woof_term_224"> <label class="woof_radio_label " for="woof_unselect">Parent 1</label> </li> <br> <li class="woof_term_225"> <label class="woof_radio_label " for="woof_unselect">Parent 2</label> </li> <br> <li class="woof_term_226"> <label class="woof_radio_label " for="woof_unselect">Parent 3</label> </li> </ul> <br> <ul class="banner-info-list"> <li class="woof_term_224" style="display: none;"> <h1 class="et_pb_module_header">Title 1</h1> <span class="et_pb_fullwidth_header_subhead">Content 1</span> </li> <li class="woof_term_225" style="display: none;"> <h1 class="et_pb_module_header">Title 2</h1> <span class="et_pb_fullwidth_header_subhead">Content 2</span> </li> <li class="woof_term_226" style="display: none;"> <h1 class="et_pb_module_header">Title 3</h1> <span class="et_pb_fullwidth_header_subhead">Content 3</span> </li> </ul> 

Answer 2

您需要定位父类，同时，您应该只在banner-info中显示li.whateverClass。

sp你jQuery可以这样做：

j('.woof_list_radio .woof_radio_label').click(function(e) {
    e.preventDefault();
    //Getting the parent class
    var firstClass = j(this).closest('li').attr('class');

    console.log(firstClass);
    //Showing the correct li
    j('.banner-info-list > li.'+firstClass).show('slow').siblings().hide('slow');
});