javascript - 如何根据 WP Divi 主题中的事件 slider 颜色类将 AddClass 添加到主体

Question

我正在尝试为 Wordpress 自定义 Divi 主题。

在这个元素中:http://dm-wp.com/vins-lelievre/ , 如果事件幻灯片背景是深色的，我希望 Logo 和菜单颜色变为白色。

如果新的事件幻灯片具有“et_pb_bg_layout_dark”类，我想向主体添加一个类。

向 slider 容器添加颜色类的函数已经存在。

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

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

• 可能 http://dm-wp.com/vins-lelievre/wp-content/themes/Divi/includes/builder/scripts/frontend-builder-scripts.js?ver=3.0.10

根据我的调查，脚本看起来像这样。

我猜是错误的或不完整的:

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

谢谢你的帮助

Answer 1

这是 slider 结构，如果“et_pb_slide”具有“et_pb_bg_layout_dark”，则“et_pb_slider”中的“et_pb_bg_layout_light”实际上更改为“et_pb_bg_layout_dark”。只有 CSS 类，我添加了 ID '#home-slide'，但理论上它不应该是必需的。

			<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">
				<div class="et_pb_slides">
					<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);'>
				
				
				<div class="et_pb_container clearfix">
					
					<div class="et_pb_slide_description">
						<h2 class="et_pb_slide_title"><a href="http://dm-wp.com/vins-lelievre/maison-lelievre/">DÉCOUVREZ LA MAISON LELIÈVRE</a></h2>
						<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>
						<a href="http://dm-wp.com/vins-lelievre/maison-lelievre/" class="et_pb_more_button et_pb_button">Découvrir</a>
					</div> <!-- .et_pb_slide_description -->
				</div> <!-- .et_pb_container -->
				
			</div> <!-- .et_pb_slide -->
			<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);'>
				
				<div class="et_pb_slide_overlay_container"></div>
				<div class="et_pb_container clearfix">
					
					<div class="et_pb_slide_description">
						<h2 class="et_pb_slide_title"><a href="http://dm-wp.com/vins-lelievre/boutique/">BIENVENUE À LA CAVE</a></h2>
						<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>
						<a href="http://dm-wp.com/vins-lelievre/boutique/" class="et_pb_more_button et_pb_button">Entrer</a>
					</div> <!-- .et_pb_slide_description -->
				</div> <!-- .et_pb_container -->
				
			</div> <!-- .et_pb_slide -->
			<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);'>
				
				
				<div class="et_pb_container clearfix">
					
					<div class="et_pb_slide_description">
						<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>
						<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>
						<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>
					</div> <!-- .et_pb_slide_description -->
				</div> <!-- .et_pb_container -->
				
			</div> <!-- .et_pb_slide -->
			
				</div> <!-- .et_pb_slides -->
			</div> <!-- .et_pb_slider -->