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

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

我想向<li>内单击的<li>显示class =“ banner-info-list”内的class="woof_list woof_list_radio"之一

例如：如果我单击“父级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');
});

最佳答案

您可以在每次单击时获取类名属性，并在.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>

关于javascript - 如何显示与jquery中单击的li相同的li类？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51649510/