无法使用jQuery设置宽度
我想用jquery设置基于祖父母元素的宽度。我可以得到正确的宽度显示在控制台中,但属性不会被添加到元素的CSS。无法使用jQuery设置宽度
我使用这个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
任何帮助表示赞赏!
选择器.back .nrl-box
将选择元素.back
中的元素.nrl-box
- 这就是空间的作用。
它看起来像你想选择一个元素与两个类,所以你想要的选择器是.back.nrl-box
。
尝试,但仍然没有 –
我相信它必须使用我正在使用的jQuery翻转插件 –
@ Top-Bot - 你是对的,翻转插件覆盖了一些内联样式,包括'width'。尝试设置'min-width'属性,因为这将会采用样式优先(因为您的值较大),并保持插件的覆盖。 –
flip
函数覆盖您设置的任何宽度。所以翻转功能后,移动你的宽度设置:
$("#card").flip({
axis: 'y',
trigger: 'click',
onEnd: function() {
console.log('Box Flips');
},
});
$(".back.nrl-box").css("width", nrlwidth);
注意的变化.css()
太行。
也许不能解决你的问题,但应该不是重要由'!'被preceeded? 此外,你是否尝试使用更具体的选择器?像 '$(“。col-sm-3> .back .nrl-box”)' –
是的,这是我的错误,但没有解决问题 –
你可以尝试一个更具体的选择器? –