无法使用jQuery设置宽度

Question

我想用jquery设置基于祖父母元素的宽度。我可以得到正确的宽度显示在控制台中，但属性不会被添加到元素的CSS。

我使用这个jquery设置样式，因为我需要覆盖另一个规则。

$(".back .nrl-box").css("cssText", "width:" + nrlwidth + "important"); 

jQuery(document).ready(function() {  
 
    var nrlwidth = $("#nrl-main") 
 
    .width()/1.95 + "px"; 
 
    console.log(nrlwidth); 
 
    $(".back .nrl-box").css("cssText", "width:" + nrlwidth + "important"); 
 
    $("#card").flip({ 
 
    axis: 'y', 
 
    trigger: 'click', 
 
    onEnd: function() { 
 
     console.log('Box Flips'); 
 
    }, 
 
    }); 
 
    $("#card1").flip({ 
 
    axis: 'y', 
 
    trigger: 'click' 
 
    }); 
 
    $("#card2").flip({ 
 
    axis: 'y', 
 
    trigger: 'click' 
 
    }); 
 
    $("#card3").flip({ 
 
    axis: 'y', 
 
    trigger: 'click' 
 
    }); 
 
    $("#card4").flip({ 
 
    axis: 'y', 
 
    trigger: 'click' 
 
    }); 
 
    $("#card5").flip({ 
 
    axis: 'y', 
 
    trigger: 'click' 
 
    }); 
 
    $("#card6").flip({ 
 
    axis: 'y', 
 
    trigger: 'click' 
 
    }); 
 
    $("#card7").flip({ 
 
    axis: 'y', 
 
    trigger: 'click' 
 
    }); 
 

 
    $("#card").click(function() { 
 
    $("#card1").toggle(); 
 
    $("#card4").toggle(); 
 
    $("#card5").toggle(); 
 
    }); 
 
});

.nrl-box { 
 
    box-shadow: 4px 4px 2px #888888; 
 
    color: #006699 !important; 
 
    background: linear-gradient(to bottom, #dbdbdb 0%, #f2f2f2 100%); 
 
    border-color: #B3B3B3; 
 
    padding: 8px !important; 
 
    font: 12px/20px "Helvetica      Neue", Helvetica, Arial, sans-serif; 
 
    border-radius: 0px !important; 
 
    margin-bottom: 15px !important; 
 
    text-align: center; 
 
} 
 

 
.col-sm-3 { 
 
    width: 25% !important; 
 
    height: 200px !important; 
 
    border-radius: 10px !important; 
 
    margin-bottom: 10px; 
 
    margin-top: 20px; 
 
} 
 

 
.front { 
 
    height: 195px !important; 
 
    z-index: 2; 
 
    position: relative; 
 
} 
 

 
#card1 { 
 
    position: relative; 
 
} 
 

 
.back { 
 
    z-index: 10000000000 !important; 
 
    position: relative; 
 
} 
 

 
.row { 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div id="nrl-main" class="col-sm-12"> 
 
     <div class="col-sm-3"> 
 
     <div id="card" class=""> 
 
      <div class="front nrl-box"> 
 
      <i class="fa fa-home fa-5x nrl-fa" aria-hidden="true"></i> 
 
      <h3> 3 </h3> 
 
      </div> 
 
      <div class="back nrl-box"> 
 

 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
     <div id="card1" class=""> 
 
      <div class="front nrl-box"> 
 
      <i class="fa fa-home fa-5x nrl-fa" aria-hidden="true"></i> 
 
      <h3> 3 </h3> 
 
      </div> 
 
      <div class="back nrl-box"> 
 
      Back content <br /> one more time 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
     <div id="card2" class=""> 
 
      <div class="front nrl-box"> 
 
      <i class="fa fa-home fa-5x nrl-fa" aria-hidden="true"></i> 
 
      <h3> 3 </h3> 
 
      </div> 
 
      <div class="back nrl-box"> 
 
      Back content <br /> one more time 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
     <div id="card3" class=""> 
 
      <div class="front nrl-box"> 
 
      <i class="fa fa-home fa-5x nrl-fa" aria-hidden="true"></i> 
 
      <h3> 3 </h3> 
 
      </div> 
 
      <div class="back nrl-box"> 
 
      Back content <br /> one more time 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
     <div id="card4" class=""> 
 
      <div class="front nrl-box"> 
 
      <i class="fa fa-home fa-5x nrl-fa" aria-hidden="true"></i> 
 
      <h3> 3 </h3> 
 
      </div> 
 
      <div id="box1" class="back nrl-box"> 
 
      Back content <br /> one more time 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
     <div id="card5" class=""> 
 
      <div class="front nrl-box"> 
 
      <i class="fa fa-home fa-5x nrl-fa" aria-hidden="true"></i> 
 
      <h3> 3 </h3> 
 
      </div> 
 
      <div class="back nrl-box"> 
 
      Back content <br /> one more time 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
     <div id="card6" class=""> 
 
      <div class="front nrl-box"> 
 
      <i class="fa fa-home fa-5x nrl-fa" aria-hidden="true"></i> 
 
      <h3> 3 </h3> 
 
      </div> 
 
      <div class="back nrl-box"> 
 
      Back content <br /> one more time 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
     <div id="card7" class=""> 
 
      <div class="front nrl-box"> 
 
      <i class="fa fa-home fa-5x nrl-fa" aria-hidden="true"></i> 
 
      <h3> 3 </h3> 
 
      </div> 
 
      <div class="back nrl-box"> 
 
      Back content <br /> one more time 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<script> 
 
</script>

这里是codepen链接https://codepen.io/RobertCC/pen/KvmxrR?editors=1111

任何帮助表示赞赏！

Answer 1

选择器.back .nrl-box将选择元素.back中的元素.nrl-box - 这就是空间的作用。

它看起来像你想选择一个元素与两个类，所以你想要的选择器是.back.nrl-box。

Answer 2

flip函数覆盖您设置的任何宽度。所以翻转功能后，移动你的宽度设置：

$("#card").flip({ 
    axis: 'y', 
    trigger: 'click', 
    onEnd: function() { 
      console.log('Box Flips'); 
     }, 
}); 
$(".back.nrl-box").css("width", nrlwidth); 

注意的变化.css()太行。

https://codepen.io/anon/pen/xLXPKx?editors=1111