2016-11-29 2 views
0

WordpressのテーマDiviをカスタマイズしようとしています。WP diviテーマのアクティブなスライダーの色のクラスに応じて、AddClassをボディに追加する方法

このプロジェクトでは:http://dm-wp.com/vins-lelievre/、アクティブなスライドの背景が暗い場合は、ロゴとメニューの色を白に変更したいと思います。

新しいアクティブなスライドに「et_pb_bg_layout_dark」というクラスがある場合は、ボディにクラスを追加したいと思います。

スライダコンテナにカラークラスを追加する機能は既に存在します。

私が見逃しているのは、スクリプトを再実行して状態を確認するイベントだと思います。

テーマの統合フィールドにスクリプトを挿入することも、テーマ.jsファイルを編集することもできますか?私の調査から

、スクリプトは次のようになります。

私はそれが間違っているか、完了していない推測:あなたはあなたのコードで<div id="slide-home"></div>を持っていなかったあなたの助け

+0

は、あなただけの「et_pb_bg_layout_dark」が追加されているときに光をテーマにしたナビゲーションのためのクラスが追加させませんでしたか? – Goombah

+0

はい、それは私が手に入れたいものですが、どうですか? – Rolboz

答えて

0

ため

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

感謝を。

あなたは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

ありがとうございました。でも、私のイベントはクリックではなく、スライダーの自動アニメーションです。条件if(jQuery( '#slide-home')。hasClass( "et_pb_bg_layout_dark"))は、各スライダの自動変更でチェックする必要があります。 – Rolboz

+0

それで 'クリック 'イベントを削除します –

+0

私は自分の答えを編集します –

0

を変更します。これは、 'et_pb_bg_layout_lightが' 実際には 'に変更されたスライダ構造であり、 'et_pb_slide'に 'et_pb_bg_layout_dark'が含まれている場合、 'et_pb_slider'内の 'et_pb_bg_layout_dark' 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

私は私が持っていたい1と同様の機能を見つけることができると思う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 }

関連する問題