javascript - 无法使用 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>

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

感谢任何帮助!

Answer 1

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