代码之家  ›  专栏  ›  技术社区  ›  iceiceicy

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

  •  0
  • iceiceicy  · 技术社区  · 6 年前

    基于下面的代码片段,对于当前的show div,它将插入一个内联css display: block 而另一个部门 display: none . 所有这些div都包含同一个类 .boxlink . 他们的父div类是 .product-link .

    现在,我创建了一个if语句,其中,if .box链接 包含的内联css 显示:块 ,其父div将具有内联css background: #E6DCD0 .

    但没用。我能知道为什么和怎么解决吗?基本上,我想要现在的节目 .box链接 父div是 .产品链接 成为 背景:#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 回复  |  直到 6 年前
        1
  •  2
  •   Komal    6 年前

    你需要把我在前面的答案中建议的那一行插入里面 盒子激活 功能。另外,在将背景颜色设置为下一个元素之前,设置background:none。

    您还需要做的一件事是为boxlink visible设置加载时的背景色。为此,我在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>
        2
  •  0
  •   SayJeyHi    6 年前

    使用 $('.boxlink').is(":visible") 而不是 $('.boxlink').prop('style').display == 'block'

    加上 background 对于 $('.boxlink') 不是它的父母

        3
  •  0
  •   Komal    6 年前

    可以使用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 方法,基本上用于元素的属性,例如获取或设置布尔值,如checked、disabled等。 style 被视为其属性,jQuery提供单独的一组函数来操作DOM中的样式。这些是在jQuery中存在的样式操作方法: http://api.jquery.com/category/manipulation/style-properties/ .

    更新:

    根据要求,只改变可见的 boxlink 父背景,您可以简单地写下这一行:

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