Как показать класс li, который совпадает с щелчком li в jquery?

63
6

У меня есть динамический список в 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> внутри класса = "banner-info-list" для того, что <li> было class="woof_list woof_list_radio" внутри 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');
});

спросил(а) 2021-01-25T15:54:37+03:00 5 месяцев назад
1
Решение
77

Вы можете получить атрибут имени класса для каждого клика и использовать его в .banner-info-list, чтобы найти ли, который вам нужно показать:

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

ответил(а) 2021-01-25T15:54:37+03:00 5 месяцев назад
63

Вам нужно настроить таргетинг на родительский класс, и в то же время вы должны показывать только 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');
});

ответил(а) 2021-01-25T15:54:37+03:00 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема