2016-11-29 26 views
0

我想为WordPress自定义主题DiviAddClass如何取决于活动滑块颜色类在WP Divi主题

在这个项目中:http://dm-wp.com/vins-lelievre/,如果活动幻灯片背景太暗,我希望将徽标和菜单颜色更改为白色。

如果新的活动幻灯片具有类“et_pb_bg_layout_dark”,我想向主体添加一个类。

函数已经存在用于向滑块容器添加颜色类。

我想我缺少的是使脚本再次运行以检查条件的事件。

我可以在主题的集成字段中插入脚本,还是应该编辑主题.js文件?

从我的调查,脚本应该是这样的。

我想这是错误的或不完整:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<script type="text/javascript"> 
 
    jQuery(document).ready(function() { 
 
     if (jQuery('#slide-home').hasClass("et_pb_bg_layout_dark")) { 
 
      jQuery('body').addClass('yourClassName'); 
 
     } 
 
    }); 
 
</script>

感谢您的帮助

+0

你不能只是让当“et_pb_bg_layout_dark”被添加添加了光主题导航类? – Goombah

+0

是的,这就是我想得到的,但是如何? – Rolboz

回答

0

你没有在你的代码<div id="slide-home"></div>

当你点击button,如果#slide-home.et_pb_bg_layout_dark类,身体的背景会变成

body { 
 
    min-height: 200px; 
 
    border: 1px solid red; 
 
} 
 

 
body.yourClassName { 
 
    background: red; 
 
}
<div id="slide-home" class="et_pb_bg_layout_dark"></div> 
 

 
<button id="btn">check</button> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<script type="text/javascript"> 
 
    jQuery(document).ready(function() { 
 
     
 
    if (jQuery('#slide-home').hasClass("et_pb_bg_layout_dark")) { 
 
      jQuery('body').addClass('yourClassName'); 
 
     } 
 
    
 
     
 
     
 
    }); 
 
</script>

+0

谢谢Morteza,但我的事件不是点击,它是滑块自动动画。条件如果(jQuery('#slide-home')。hasClass(“et_pb_bg_layout_dark”))必须在每个滑块自动更改时进行检查。 – Rolboz

+0

所以,删除'click'事件 –

+0

我编辑我的答案 –

0

这是滑块结构,其中 'et_pb_bg_layout_light' 实际上是改变了“如果'et_pb_slide'具有'et_pb_bg_layout_dark',则'et_pb_bg_layout_dark'在'et_pb_slider'内部。只有CSS类,我添加了ID'#home-slide',但在理论上它不应该是必需的。

\t \t \t <div id="home-slide" class="et_pb_module et_pb_slider et_slider_auto et_slider_speed_7000 et_slider_auto_ignore_hover et_pb_fullwidth_slider_0"> 
 
\t \t \t \t <div class="et_pb_slides"> 
 
\t \t \t \t \t <div class="et_pb_slide et_pb_bg_layout_light et_pb_slider_with_text_overlay et_pb_slide_0 et-pb-active-slide" style='background-color:#ffffff;background-image:url(http://dm-wp.com/vins-lelievre/wp-content/uploads/2016/10/léquipe-des-vins-lelievre.jpg);'> 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t \t <div class="et_pb_container clearfix"> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <div class="et_pb_slide_description"> 
 
\t \t \t \t \t \t <h2 class="et_pb_slide_title"><a href="http://dm-wp.com/vins-lelievre/maison-lelievre/">DÉCOUVREZ LA MAISON LELIÈVRE</a></h2> 
 
\t \t \t \t \t \t <div class="et_pb_slide_content"> 
 
<p style="text-align: right;">Une famille, un vignoble, une histoire,<br /> 
 
un savoir-faire, des vins&#8230;</p> 
 
</div> 
 
\t \t \t \t \t \t <a href="http://dm-wp.com/vins-lelievre/maison-lelievre/" class="et_pb_more_button et_pb_button">Découvrir</a> 
 
\t \t \t \t \t </div> <!-- .et_pb_slide_description --> 
 
\t \t \t \t </div> <!-- .et_pb_container --> 
 
\t \t \t \t 
 
\t \t \t </div> <!-- .et_pb_slide --> 
 
\t \t \t <div class="et_pb_slide et_pb_bg_layout_dark et_pb_slider_with_overlay et_pb_slider_with_text_overlay et_pb_slide_1" style='background-color:#ffffff;background-image:url(http://dm-wp.com/vins-lelievre/wp-content/uploads/2016/10/david-lelievre-ca-nous-a-ouvert-des-marches-1433506900.jpg);'> 
 
\t \t \t \t 
 
\t \t \t \t <div class="et_pb_slide_overlay_container"></div> 
 
\t \t \t \t <div class="et_pb_container clearfix"> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <div class="et_pb_slide_description"> 
 
\t \t \t \t \t \t <h2 class="et_pb_slide_title"><a href="http://dm-wp.com/vins-lelievre/boutique/">BIENVENUE À LA CAVE</a></h2> 
 
\t \t \t \t \t \t <div class="et_pb_slide_content"> 
 
<p style="text-align: right;">Découvrez nos vins de Lorraine et Côtes de Toul et nos spécialités régionales et internationales.</p> 
 
</div> 
 
\t \t \t \t \t \t <a href="http://dm-wp.com/vins-lelievre/boutique/" class="et_pb_more_button et_pb_button">Entrer</a> 
 
\t \t \t \t \t </div> <!-- .et_pb_slide_description --> 
 
\t \t \t \t </div> <!-- .et_pb_container --> 
 
\t \t \t \t 
 
\t \t \t </div> <!-- .et_pb_slide --> 
 
\t \t \t <div class="et_pb_slide et_pb_bg_layout_dark et_pb_slider_with_text_overlay et_pb_slide_2" style='background-color:#000000;background-image:url(http://dm-wp.com/vins-lelievre/wp-content/uploads/2016/10/mirabelles-fraiches-1.jpg);'> 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t \t <div class="et_pb_container clearfix"> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <div class="et_pb_slide_description"> 
 
\t \t \t \t \t \t <h2 class="et_pb_slide_title"><a href="http://dm-wp.com/vins-lelievre/categorie-produit/delices-lorrains/mirabelles/mirabelles-fraiches/">ELLES SONT ARRIVÉES!!!</a></h2> 
 
\t \t \t \t \t \t <div class="et_pb_slide_content"> 
 
<p style="text-align: right;">Les mirabelles fraîches 2016 sont là! Venez les chercher ou commandez directement en ligne</p> 
 
</div> 
 
\t \t \t \t \t \t <a href="http://dm-wp.com/vins-lelievre/categorie-produit/delices-lorrains/mirabelles/mirabelles-fraiches/" class="et_pb_more_button et_pb_button">Acheter</a> 
 
\t \t \t \t \t </div> <!-- .et_pb_slide_description --> 
 
\t \t \t \t </div> <!-- .et_pb_container --> 
 
\t \t \t \t 
 
\t \t \t </div> <!-- .et_pb_slide --> 
 
\t \t \t 
 
\t \t \t \t </div> <!-- .et_pb_slides --> 
 
\t \t \t </div> <!-- .et_pb_slider -->

0

这里是一片原始的视觉生成器的JavaScript,我想我能找到类似的功能到一个我想拥有的。例如“et_slider_auto_rotate()”或变量“tabs_animation”。任何人都能启发我解释如何在每次幻灯片更改时检查课程并添加或删除课程?

\t window.et_pb_init_modules = function() { 
 
\t \t $.et_pb_simple_slider = function(el, options) { 
 
\t \t \t var settings = $.extend({ 
 
\t \t \t \t slide   \t \t \t : '.et-slide', \t \t \t \t \t // slide class 
 
\t \t \t \t arrows \t \t \t \t \t : '.et-pb-slider-arrows', \t \t // arrows container class 
 
\t \t \t \t prev_arrow \t \t \t \t : '.et-pb-arrow-prev', \t \t \t // left arrow class 
 
\t \t \t \t next_arrow \t \t \t \t : '.et-pb-arrow-next', \t \t \t // right arrow class 
 
\t \t \t \t controls \t \t \t \t : '.et-pb-controllers a', \t \t // control selector 
 
\t \t \t \t carousel_controls \t \t : '.et_pb_carousel_item', \t \t // carousel control selector 
 
\t \t \t \t control_active_class \t : 'et-pb-active-control', \t \t // active control class name 
 
\t \t \t \t previous_text \t \t \t : et_pb_custom.previous, \t \t \t // previous arrow text 
 
\t \t \t \t next_text \t \t \t \t : et_pb_custom.next, \t \t \t \t // next arrow text 
 
\t \t \t \t fade_speed \t \t \t \t : 500, \t \t \t \t \t \t \t // fade effect speed 
 
\t \t \t \t use_arrows \t \t \t \t : true, \t \t \t \t \t \t \t // use arrows? 
 
\t \t \t \t use_controls \t \t \t : true, \t \t \t \t \t \t \t // use controls? 
 
\t \t \t \t manual_arrows \t \t \t : '', \t \t \t \t \t \t \t // html code for custom arrows 
 
\t \t \t \t append_controls_to \t \t : '', \t \t \t \t \t \t \t // controls are appended to the slider element by default, here you can specify the element it should append to 
 
\t \t \t \t controls_below \t \t \t : false, 
 
\t \t \t \t controls_class \t \t \t : 'et-pb-controllers', \t \t \t \t // controls container class name 
 
\t \t \t \t slideshow \t \t \t \t : false, \t \t \t \t \t \t // automattic animation? 
 
\t \t \t \t slideshow_speed \t \t \t : 7000, \t \t \t \t \t \t \t // automattic animation speed 
 
\t \t \t \t show_progress_bar \t \t : false, \t \t \t \t \t \t \t // show progress bar if automattic animation is active 
 
\t \t \t \t tabs_animation \t \t \t : false, 
 
\t \t \t \t use_carousel \t \t \t : false 
 
\t \t \t }, options); 
 

 
\t \t \t var $et_slider \t \t \t = $(el), 
 
\t \t \t \t $et_slide \t \t \t = $et_slider.closest_descendent(settings.slide), 
 
\t \t \t \t et_slides_number \t = $et_slide.length, 
 
\t \t \t \t et_fade_speed \t \t = settings.fade_speed, 
 
\t \t \t \t et_active_slide \t \t = 0, 
 
\t \t \t \t $et_slider_arrows, 
 
\t \t \t \t $et_slider_prev, 
 
\t \t \t \t $et_slider_next, 
 
\t \t \t \t $et_slider_controls, 
 
\t \t \t \t $et_slider_carousel_controls, 
 
\t \t \t \t et_slider_timer, 
 
\t \t \t \t controls_html = '', 
 
\t \t \t \t carousel_html = '', 
 
\t \t \t \t $progress_bar = null, 
 
\t \t \t \t progress_timer_count = 0, 
 
\t \t \t \t $et_pb_container = $et_slider.find('.et_pb_container'), 
 
\t \t \t \t et_pb_container_width = $et_pb_container.width(), 
 
\t \t \t \t is_post_slider = $et_slider.hasClass('et_pb_post_slider'); 
 

 
\t \t \t \t $et_slider.et_animation_running = false; 
 

 
\t \t \t \t $.data(el, "et_pb_simple_slider", $et_slider); 
 

 
\t \t \t \t $et_slide.eq(0).addClass('et-pb-active-slide'); 
 

 
\t \t \t \t if (! settings.tabs_animation) { 
 
\t \t \t \t \t if (!$et_slider.hasClass('et_pb_bg_layout_dark') && !$et_slider.hasClass('et_pb_bg_layout_light')) { 
 
\t \t \t \t \t \t $et_slider.addClass(et_get_bg_layout_color($et_slide.eq(0))); 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t \t 
 

 

 
\t \t \t \t if (settings.use_arrows && et_slides_number > 1) { 
 
\t \t \t \t \t if (settings.manual_arrows == '') 
 
\t \t \t \t \t \t $et_slider.append('<div class="et-pb-slider-arrows"><a class="et-pb-arrow-prev" href="#">' + '<span>' +settings.previous_text + '</span>' + '</a><a class="et-pb-arrow-next" href="#">' + '<span>' + settings.next_text + '</span>' + '</a></div>'); 
 
\t \t \t \t \t else 
 
\t \t \t \t \t \t $et_slider.append(settings.manual_arrows); 
 

 
\t \t \t \t \t $et_slider_arrows \t = $et_slider.find(settings.arrows); 
 
\t \t \t \t \t $et_slider_prev \t = $et_slider.find(settings.prev_arrow); 
 
\t \t \t \t \t $et_slider_next \t = $et_slider.find(settings.next_arrow); 
 

 
\t \t \t \t \t $et_slider_next.click(function(){ 
 
\t \t \t \t \t \t if ($et_slider.et_animation_running) \t return false; 
 

 
\t \t \t \t \t \t $et_slider.et_slider_move_to('next'); 
 

 
\t \t \t \t \t \t return false; 
 
\t \t \t \t \t }); 
 

 
\t \t \t \t \t $et_slider_prev.click(function(){ 
 
\t \t \t \t \t \t if ($et_slider.et_animation_running) \t return false; 
 

 
\t \t \t \t \t \t $et_slider.et_slider_move_to('previous'); 
 

 
\t \t \t \t \t \t return false; 
 
\t \t \t \t \t }); 
 

 
\t \t \t \t \t // swipe support requires et-jquery-touch-mobile 
 
\t \t \t \t \t $et_slider.find(settings.slide).on('swipeleft', function() { 
 
\t \t \t \t \t \t $et_slider.et_slider_move_to('next'); 
 
\t \t \t \t \t }); 
 
\t \t \t \t \t $et_slider.find(settings.slide).on('swiperight', function() { 
 
\t \t \t \t \t \t $et_slider.et_slider_move_to('previous'); 
 
\t \t \t \t \t }); 
 
\t \t \t \t } 
 

 
\t \t \t \t if (settings.use_controls && et_slides_number > 1) { 
 
\t \t \t \t \t for (var i = 1; i <= et_slides_number; i++) { 
 
\t \t \t \t \t \t controls_html += '<a href="#"' + (i == 1 ? ' class="' + settings.control_active_class + '"' : '') + '>' + i + '</a>'; 
 
\t \t \t \t \t } 
 

 
\t \t \t \t \t controls_html = 
 
\t \t \t \t \t \t '<div class="' + settings.controls_class + '">' + 
 
\t \t \t \t \t \t \t controls_html + 
 
\t \t \t \t \t \t '</div>'; 
 

 
\t \t \t \t \t if (settings.append_controls_to == '') 
 
\t \t \t \t \t \t $et_slider.append(controls_html); 
 
\t \t \t \t \t else 
 
\t \t \t \t \t \t $(settings.append_controls_to).append(controls_html); 
 

 
\t \t \t \t \t if (settings.controls_below) 
 
\t \t \t \t \t \t $et_slider_controls \t = $et_slider.parent().find(settings.controls); 
 
\t \t \t \t \t else 
 
\t \t \t \t \t \t $et_slider_controls \t = $et_slider.find(settings.controls); 
 

 
\t \t \t \t \t et_maybe_set_controls_color($et_slide.eq(0)); 
 

 
\t \t \t \t \t $et_slider_controls.click(function(){ 
 
\t \t \t \t \t \t if ($et_slider.et_animation_running) \t return false; 
 

 
\t \t \t \t \t \t $et_slider.et_slider_move_to($(this).index()); 
 

 
\t \t \t \t \t \t return false; 
 
\t \t \t \t \t }); 
 
\t \t \t \t } 
 

 
\t \t \t \t if (settings.use_carousel && et_slides_number > 1) { 
 
\t \t \t \t \t for (var i = 1; i <= et_slides_number; i++) { 
 
\t \t \t \t \t \t slide_id = i - 1; 
 
\t \t \t \t \t \t image_src = ($et_slide.eq(slide_id).data('image') !== undefined) ? 'url(' + $et_slide.eq(slide_id).data('image') + ')' : 'none'; 
 
\t \t \t \t \t \t carousel_html += '<div class="et_pb_carousel_item ' + (i == 1 ? settings.control_active_class : '') + '" data-slide-id="'+ slide_id +'">' + 
 
\t \t \t \t \t \t \t '<div class="et_pb_video_overlay" href="#" style="background-image: ' + image_src + ';">' + 
 
\t \t \t \t \t \t \t \t '<div class="et_pb_video_overlay_hover"><a href="#" class="et_pb_video_play"></a></div>' + 
 
\t \t \t \t \t \t \t '</div>' + 
 
\t \t \t \t \t \t '</div>'; 
 
\t \t \t \t \t } 
 

 
\t \t \t \t \t carousel_html = 
 
\t \t \t \t \t \t '<div class="et_pb_carousel">' + 
 
\t \t \t \t \t \t '<div class="et_pb_carousel_items">' + 
 
\t \t \t \t \t \t \t carousel_html + 
 
\t \t \t \t \t \t '</div>' + 
 
\t \t \t \t \t \t '</div>'; 
 
\t \t \t \t \t $et_slider.after(carousel_html); 
 

 
\t \t \t \t \t $et_slider_carousel_controls = $et_slider.siblings('.et_pb_carousel').find(settings.carousel_controls); 
 
\t \t \t \t \t $et_slider_carousel_controls.click(function(){ 
 
\t \t \t \t \t \t if ($et_slider.et_animation_running) \t return false; 
 

 
\t \t \t \t \t \t var $this = $(this); 
 
\t \t \t \t \t \t $et_slider.et_slider_move_to($this.data('slide-id')); 
 

 
\t \t \t \t \t \t return false; 
 
\t \t \t \t \t }); 
 
\t \t \t \t } 
 

 
\t \t \t \t if (settings.slideshow && et_slides_number > 1) { 
 
\t \t \t \t \t $et_slider.hover(function() { 
 
\t \t \t \t \t \t if ($et_slider.hasClass('et_slider_auto_ignore_hover')) { 
 
\t \t \t \t \t \t \t return; 
 
\t \t \t \t \t \t } 
 

 
\t \t \t \t \t \t $et_slider.addClass('et_slider_hovered'); 
 

 
\t \t \t \t \t \t if (typeof et_slider_timer != 'undefined') { 
 
\t \t \t \t \t \t \t clearInterval(et_slider_timer); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t }, function() { 
 
\t \t \t \t \t \t if ($et_slider.hasClass('et_slider_auto_ignore_hover')) { 
 
\t \t \t \t \t \t \t return; 
 
\t \t \t \t \t \t } 
 

 
\t \t \t \t \t \t $et_slider.removeClass('et_slider_hovered'); 
 

 
\t \t \t \t \t \t et_slider_auto_rotate(); 
 
\t \t \t \t \t }); 
 
\t \t \t \t } 
 

 
\t \t \t \t et_slider_auto_rotate(); 
 

 
\t \t \t \t function et_slider_auto_rotate(){ 
 
\t \t \t \t \t if (settings.slideshow && et_slides_number > 1 && ! $et_slider.hasClass('et_slider_hovered')) { 
 
\t \t \t \t \t \t et_slider_timer = setTimeout(function() { 
 
\t \t \t \t \t \t \t $et_slider.et_slider_move_to('next'); 
 
\t \t \t \t \t \t }, settings.slideshow_speed); 
 
\t \t \t \t \t } 
 
\t \t \t \t }