我正在尝试使用 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>
这是代码笔链接 https://codepen.io/RobertCC/pen/KvmxrR?editors=1111
感谢任何帮助!
最佳答案
flip
函数正在覆盖您设置的任何宽度。所以在翻转功能之后移动宽度设置:
$("#card").flip({
axis: 'y',
trigger: 'click',
onEnd: function() {
console.log('Box Flips');
},
});
$(".back.nrl-box").css("width", nrlwidth);
也请注意更改 .css()
行。
关于javascript - 无法使用 jQuery 设置宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45676658/