jquery - 如果子div不包含某些内联css，则将某些内联css添加到父div

Question

根据下面的代码片段，对于当前的 show div，它将插入一个内联 cssdisplay: block 而其他 div 将是 display: none 。所有这些 div 都包含相同的类 .boxlink。它们的父 div 类是 .product-link。

现在，我创建了一个 if 语句，如果 .boxlink 包含 display: block 的内联 css，它的父 div 将有一个内联 css 背景:#E6DCD0。

但它不起作用。我可以知道为什么以及如何解决它吗？基本上，我希望当前显示 .boxlink 的父 div 是 .product-link 是 background: #E6DCD0。

P/S : if 语句在 jquery 片段的下方。

$(document).ready(function () {
  var $boxes = $('.boxlink');
  var $links = $('.product-link');
  var cycle = false;
  var cycle_step = 0;

  $('.productlist .product-link').mouseenter(function() {
    boxActivate(this.id);
    stopCycle();
  });

  $('.productlist .product-link').mouseleave(function() {
    cycle = setTimeout(function(){
        startCycle();
    }, 1000);
  });

  var boxActivate = function(id){
    $boxes.hide().filter('#box' + id).show();
  }
  // cycle - only when mouse is not over links
  var startCycle = function(){
    cycle = setInterval(function(){
        boxActivate($links.get(cycle_step).id);
        cycle_step++;
        if(cycle_step==$links.length) {
            cycle_step=0;
        }
    }, 3000);
  }
  var stopCycle = function(){
    clearInterval(cycle);
  }

  startCycle();

});

$(document).ready(function(){
if ( $('.boxlink').prop('style').display == 'block' ) {
   $('.boxlink').parent().css( "background", "#E6DCD0");
}
   });

.product-link {
    float: left;
    width: 128px;
}

.product-icon-box-desc-certified, .product-icon-box-desc-warranty, .product-icon-box-desc-buyback, .product-icon-box-desc-shipping {
    display: none;
    width: 512px;
}

.product-link:hover {
    background: #E6DCD0;
}

.product-icon-box-desc-certified {
    display: block;
    position: relative;
    top: 0px;
    left: 0;
    background: #fff;
}

.product-icon-box-desc-warranty {
    display: block;
    position: relative;
    top: 0px;
    left: -128px;
    background: #fff;
}

.product-icon-box-desc-buyback {
    display: block;
    position: relative;
    top: 0px;
    left: -256px;
    background: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="productlist">
				<div id="link0" class="product-link">
					<a href="http://google.com" target="_blank">
						<img class="center-block" src="http://iceiceicy.com/wingwah/wp-content/uploads/2015/11/icon-ori.png" /> 
							<i>Authenticity & Restoration</i>
					</a>
					<div id="boxlink0" class="product-icon-box-desc-certified boxlink">
					<p class="certified-title">CERTIFIED AUTHENTIC</p>
					<p class="certified-desc">Aliquam libero lorem, rutrum vitae dolor quis, pellentesque placerat lectus. Suspendisse potenti. Sed ullamcorper dictum libero eget aliquet. In mauris est, blandit ut aliquam at, tristique ac orci. Quisque mollis, lectus in tempor bibendum, libero dui aliquet odio, vitae dictum arcu elit sit amet eros. Maecenas pellentesque nunc enim, id porta orci pretium vitae. Nam pellentesque sem vitae neque iaculis, vel tincidunt ligula mollis. In fringilla dictum tortor eu accumsan. Donec ac neque et ligula egestas venenatis. Donec malesuada ultricies posuere. Nullam risus nunc, finibus sit amet nisi ac, molestie tempor dui.</p>
					</div>
				</div>
				<div id="link1" class="product-link">
					<a href="http://google.com" target="_blank">
						<img class="center-block" src="http://iceiceicy.com/wingwah/wp-content/uploads/2015/11/icon-waranty.png" /> 
							<i>12 Months Warranty</i>
					</a>
					<div id="boxlink1" class="product-icon-box-desc-warranty boxlink">
					<p class="certified-title">CERTIFIED PRE-OWNED WATCHES WARRANTY</p>
					<p class="certified-desc">Donec ac nibh urna. Mauris porta quis lacus id efficitur. Mauris sit amet congue nunc. Nullam tellus lacus, vehicula non viverra id, fringilla eu sapien. Nulla facilisi. Pellentesque rutrum nulla in ex facilisis blandit non eu risus. Nam imperdiet sed risus fermentum tristique. Integer elementum vitae diam non volutpat. Praesent in mi blandit nunc efficitur elementum. Etiam dapibus dui dui, vitae pretium urna dapibus at.</p>
					</div>
				</div>
				<div id="link2" class="product-link">
					<a href="http://google.com" target="_blank">
						<img class="center-block" src="http://iceiceicy.com/wingwah/wp-content/uploads/2015/11/icon-buyback.png" /> 
							<i>Buy Back / Trade In Guarantee</i>
					</a>
					<div id="boxlink2" class="product-icon-box-desc-buyback boxlink">
					<p class="certified-title">LIFE TIME BUY BACK / TRADE-IN TERMS AND CONDITION</p>
					<p class="certified-desc">Phasellus dolor nisi, ullamcorper ac mauris posuere, scelerisque viverra urna. Vivamus eleifend ullamcorper ex condimentum iaculis. Nunc volutpat massa id dui imperdiet interdum. Nullam quis libero sed velit pretium ornare. In vestibulum sollicitudin est, a fermentum libero. Praesent in ultricies libero. Integer eget dignissim diam. Donec volutpat ultrices auctor. Proin euismod magna ut nulla condimentum tempor. Donec at elit magna. Etiam pretium, augue at fringilla porta, neque nibh pulvinar nibh, at posuere ex dui ac enim. Nunc erat nibh, rhoncus non varius et, blandit in purus.</p>
					</div>
</div>

Answer 1

您需要在 boxActivate 函数中插入我在上一个答案中建议的行。此外，设置背景:无，然后再将背景颜色设置为下一个元素。

您需要做的另一件事是在加载时为可见的框链接设置背景颜色。为此，我在 document.ready 上添加了这一行:

 $('.boxlink:last').parent().css( "background", "#E6DCD0");

因为，我可以看到您的last div 正在加载时显示。

$(document).ready(function () {
  var $boxes = $('.boxlink');
  var $links = $('.product-link');
  var cycle = false;
  var cycle_step = 0;

  $('.productlist .product-link').mouseenter(function() {
    boxActivate(this.id);
    stopCycle();
  });

  $('.productlist .product-link').mouseleave(function() {
    cycle = setTimeout(function(){
        startCycle();
    }, 1000);
  });

  var boxActivate = function(id){
    $boxes.hide().filter('#box' + id).show();
     $('.boxlink').parent().css( "background", "none");
     $('.boxlink:visible').parent().css( "background", "#E6DCD0");
  }
  // cycle - only when mouse is not over links
  var startCycle = function(){
    cycle = setInterval(function(){
        boxActivate($links.get(cycle_step).id);
        cycle_step++;
        if(cycle_step==$links.length) {
            cycle_step=0;
        }
    }, 3000);
  }
  var stopCycle = function(){
    clearInterval(cycle);
  }

  startCycle();

});

$(document).ready(function(){
//if ( $('.boxlink').prop('style').display == 'block' ) {
  // $('.boxlink:visible').parent().css( "background", "#E6DCD0");
//}
  $('.boxlink:last').parent().css( "background", "#E6DCD0");
   });

.product-link {
    float: left;
    width: 128px;
}

.product-icon-box-desc-certified, .product-icon-box-desc-warranty, .product-icon-box-desc-buyback, .product-icon-box-desc-shipping {
    display: none;
    width: 512px;
}

.product-link:hover {
    background: #E6DCD0;
}

.product-icon-box-desc-certified {
    display: block;
    position: relative;
    top: 0px;
    left: 0;
    background: #fff;
}

.product-icon-box-desc-warranty {
    display: block;
    position: relative;
    top: 0px;
    left: -128px;
    background: #fff;
}

.product-icon-box-desc-buyback {
    display: block;
    position: relative;
    top: 0px;
    left: -256px;
    background: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="productlist">
				<div id="link0" class="product-link">
					<a href="http://google.com" target="_blank">
						<img class="center-block" src="http://iceiceicy.com/wingwah/wp-content/uploads/2015/11/icon-ori.png" /> 
							<i>Authenticity & Restoration</i>
					</a>
					<div id="boxlink0" class="product-icon-box-desc-certified boxlink">
					<p class="certified-title">CERTIFIED AUTHENTIC</p>
					<p class="certified-desc">Aliquam libero lorem, rutrum vitae dolor quis, pellentesque placerat lectus. Suspendisse potenti. Sed ullamcorper dictum libero eget aliquet. In mauris est, blandit ut aliquam at, tristique ac orci. Quisque mollis, lectus in tempor bibendum, libero dui aliquet odio, vitae dictum arcu elit sit amet eros. Maecenas pellentesque nunc enim, id porta orci pretium vitae. Nam pellentesque sem vitae neque iaculis, vel tincidunt ligula mollis. In fringilla dictum tortor eu accumsan. Donec ac neque et ligula egestas venenatis. Donec malesuada ultricies posuere. Nullam risus nunc, finibus sit amet nisi ac, molestie tempor dui.</p>
					</div>
				</div>
				<div id="link1" class="product-link">
					<a href="http://google.com" target="_blank">
						<img class="center-block" src="http://iceiceicy.com/wingwah/wp-content/uploads/2015/11/icon-waranty.png" /> 
							<i>12 Months Warranty</i>
					</a>
					<div id="boxlink1" class="product-icon-box-desc-warranty boxlink">
					<p class="certified-title">CERTIFIED PRE-OWNED WATCHES WARRANTY</p>
					<p class="certified-desc">Donec ac nibh urna. Mauris porta quis lacus id efficitur. Mauris sit amet congue nunc. Nullam tellus lacus, vehicula non viverra id, fringilla eu sapien. Nulla facilisi. Pellentesque rutrum nulla in ex facilisis blandit non eu risus. Nam imperdiet sed risus fermentum tristique. Integer elementum vitae diam non volutpat. Praesent in mi blandit nunc efficitur elementum. Etiam dapibus dui dui, vitae pretium urna dapibus at.</p>
					</div>
				</div>
				<div id="link2" class="product-link">
					<a href="http://google.com" target="_blank">
						<img class="center-block" src="http://iceiceicy.com/wingwah/wp-content/uploads/2015/11/icon-buyback.png" /> 
							<i>Buy Back / Trade In Guarantee</i>
					</a>
					<div id="boxlink2" class="product-icon-box-desc-buyback boxlink">
					<p class="certified-title">LIFE TIME BUY BACK / TRADE-IN TERMS AND CONDITION</p>
					<p class="certified-desc">Phasellus dolor nisi, ullamcorper ac mauris posuere, scelerisque viverra urna. Vivamus eleifend ullamcorper ex condimentum iaculis. Nunc volutpat massa id dui imperdiet interdum. Nullam quis libero sed velit pretium ornare. In vestibulum sollicitudin est, a fermentum libero. Praesent in ultricies libero. Integer eget dignissim diam. Donec volutpat ultrices auctor. Proin euismod magna ut nulla condimentum tempor. Donec at elit magna. Etiam pretium, augue at fringilla porta, neque nibh pulvinar nibh, at posuere ex dui ac enim. Nunc erat nibh, rhoncus non varius et, blandit in purus.</p>
					</div>
</div>