Блог

Главная - Вопросы по программированию - Интерполяция jQuery / CSS ничего не добавляет к элементу

Интерполяция jQuery / CSS ничего не добавляет к элементу

#jquery #interpolation

#jquery #интерполяция

Вопрос:

Я добавляю ширину к элементу с помощью jQuery, но когда я использую переменную, она ничего не добавляет.

Это отлично работает, когда я заменяю переменную js числом, но вообще не работает, когда я использую переменную.

 $(document).ready(function() {

  function homepageImages() {
    var imgOneHeight = $("img.image-one").outerHeight();
    $("img.image-two").css("top", (imgOneHeight) - 100);
    var testBlockWidth = ($("div.test-box").outerWidth() / 2);
    console.log(testBlockWidth);
    $("div.test-box").css("right", "calc(40% - "   testBlockWidth   ")");
  };

  homepageImages();

  $(window).resize(function() {
    homepageImages();
  });

});  
 html,
body {
  margin: 0;
  padding: 0;
  position: relative;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

div.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 30px;
}

header {
  z-index: 100;
  padding: 50px 0;
  position: relative;
  background-color: red;
  a.logo {
    display: inline-block;
    float: left;
    h1 {
      margin: 0;
    }
  }
  nav {
    float: right;
    ul {
      margin: 0;
      padding: 0;
      display: inline-block;
      list-style-type: none;
      li {
        margin: 0;
        padding: 0;
        display: inline-block;
        list-style-type: none;
        a {
          display: block;
          padding: 10px;
        }
      }
    }
  }
}

img {
  position: absolute;
  amp;.image-one {
    right: 0;
    top: 0;
    width: 40%;
  }
  amp;.image-two {
    left: 0;
    top: 0;
    width: 60%;
  }
}

div.test-box {
  width: 20%;
  height: 400px;
  background: #FBDE9C;
  position: absolute;
  top: 200px;
  z-index: 200;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <div class="container clearfix">
    <a class="logo" href="#">
      <h1>logo</h1>
    </a>
    <nav>
      <ul>
        <li><a href="#">Work</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

<div class="test-box"></div>

<img class="image-one" src="img/img1.jpg" alt="img1" />
<img class="image-two" src="img/img2.jpg" alt="img2" />

Я хочу, чтобы переменная применялась к функции jquery css, чтобы блок всегда находился в правильном месте.

Комментарии:

1. Что вы подразумеваете под «не работает»? Ширина поля изменяется при изменении размера окна. Что он должен делать вместо этого?

2. У него нет единицы измерения: testBlockWidth "px)");