JQuery для проверки элемента li есть класс для добавления класса к другому элементу li в другом списке - PullRequest
Новая
       12

JQuery для проверки элемента li есть класс для добавления класса к другому элементу li в другом списке

0 голосов
/ 08 октября 2018

Правильно, это странно для меня ... Я уверен, что я где-то сделал что-то не так ... но вот так:

У меня есть слайдер, в котором есть несколько элементов в одном разделеи затем некоторые другие элементы в другом, это по дизайну клиента .. не мое. 

 <div class="header-image">
 <div class="banner-slider flexslider">
 <ul class="slides rslides">
 <?php if( have_rows('slides', 'option') ): $i = 0;
 while ( have_rows('slides', 'option') ) : the_row(); $i++;?>
 <li class="slide-<?php echo $i; ?>" style="background:url(<?php the_sub_field('slide_image'); ?>);">
 <div class="info-contents">
 <div class="home-slide-info">
 <div class="header-title"><?php the_sub_field('slide_title'); ?></div>
 <a class="grve-btn grve-btn-medium grve-round grve-bg-primary-1 grve-bg-hover-black" href="<?php the_sub_field('slide_button_url'); ?>"><span><i class="smp-icon-cursor"></i><?php the_sub_field('slide_button_text'); ?></span></a></div>
 </div>
 </li>
 <?php endwhile;
 else : 
 endif; ?>
 </ul>
 </div>

 <div class="grve-container">
 <div class="head-slide-navigation">
 <ul class="ui-tabs-nav">
 <?php if( have_rows('slides', 'option') ): $i = 0;
 while ( have_rows('slides', 'option') ) : the_row(); $i++;?>
 <li class="slidetab-<?php echo $i; ?>"><a href="<?php 
 the_sub_field('slide_tab_url'); ?>"><?php the_sub_field('slide_tab_text'); ?></a></li>
 <?php endwhile;
 else :  
 endif; ?>
 </ul>
 </div>
 </div>
 </div>

По сути, то, что происходит внутри js, это то, что когда слайд активен, он показывает class = rslides1_on, который делаетСлайд активный.

Затем я использовал этот код, чтобы сказать, что, когда этот класс активен на слайде, связанная с ним вкладка слайда будет иметь «активный» класс.Но когда я использую этот код JS ниже: 

 <script type="text/javascript">
   jQuery(document).ready(function(){
     if ($('.banner-slider ul.slides li.rslides1_on')) {
         $('ul.ui-tabs-nav li a').addClass('active');
     }
   });
 </script>

Тогда он выделяет их обоих.Любой может оказать любую помощь, которую он может оказать ... Я знаю, что я сделал что-то неправильно в синтаксисе ... Я просто не могу разобраться: (

Я пытался использовать только CSS, чтобы кнопки тоже меняли цвет, но это тоже не сработало, как показано ниже: 

 ul.slides li.slide-1.rslides1_on + ul.ui-tabs-nav li.slidetab-1 a {background:#7c449b!important;}

Но это тоже не сработало. Я пробовал все CSS-комбинаторы, и ни один из них не работает.

Любойидеи?

...