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>

我想向<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');
});

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');
});

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

2 个答案: