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

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

Answer 2

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

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

无法使用jQuery设置宽度

2 个答案: