Добавьте определенный встроенный CSS к родительскому div, если дочерний div не содержит определенного встроенного css

Основываясь на фрагменте ниже, для текущего show div, он вставит встроенный CSS display: block в то время как другой div будет display: none, Все эти div содержат один и тот же класс .boxlink, Их родительский класс div .product-link,

Теперь я создал оператор if, где, если .boxlink содержат встроенный CSS display: block его родительский div будет иметь встроенный CSS background: #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>

Источник

3 ответа

Решение

Вам нужно вставить строку, которую я предложил в предыдущем ответе, внутри функции boxActivate. Кроме того, установите background: none, прежде чем устанавливать цвет фона для следующего элемента.

Еще одна вещь, которую вам нужно сделать, это установить цвет фона при загрузке для видимой boxlink. Для этого я добавил эту строку в document.ready:

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

Так как я мог видеть ваш последний 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>

Источник

Использование $('.boxlink').is(":visible") вместо $('.boxlink').prop('style').display == 'block'

и добавить background за $('.boxlink') не его родитель

Источник

Доступ к стилям CSS в jquery можно получить с помощью метода css, как показано ниже:

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

Кроме того, вы также можете использовать (":visible") или (":hidden") селектор, чтобы проверить, является ли элемент видимым или нет:

 if ( !$('.boxlink').is(":hidden") ) {
       $('.boxlink').parent().css( "background", "#E6DCD0");
    }

или же

 if ( $('.boxlink').is(":visible") ) {
       $('.boxlink').parent().css( "background", "#E6DCD0");
 }

Ты используешь prop метод, который в основном используется для свойств элемента, например, для. получить или установить логические значения, такие как проверено, отключено и т. д. style рассматривается как его атрибут, а jQuery предоставляет отдельный набор функций для управления стилями в DOM. Это методы манипулирования стилем, существующие в jquery: http://api.jquery.com/category/manipulation/style-properties/.

Обновить:

Согласно требованию, изменить только видимый boxlink родительский фон, вы можете просто написать эту строку:

$('.boxlink:visible').parent().css( "background", "#E6DCD0");
Источник
Другие вопросы по тегам