时间戳

首页 > 解决方案 > 我如何将 CSS 属性设置为 if 语句中的条件？

javascript - 我如何将 CSS 属性设置为 if 语句中的条件？

问题描述

我在将 CSS 属性设置为 if 语句的条件时遇到了问题。

我的目标是在条件为真时重置特定 div 的值。例如，当.inline-grid的 left 属性变为 -200% 或 200% 时，每次都将 left 属性重置为 0，这样看起来就像永远重复内容。

所以我试图比较值之间的 CSS 属性，但它没有用。

这真的很难弄清楚，因为浏览器不会在控制台面板上显示任何类型的错误消息。

这是我的代码。

*SOF 预览运行我的代码时出错。您可以在CodePen中检查这一点。

$(function swipeInit() {
  /* Variables */
  var _ = $('#swipe > .container > .grid > .inline-grid'),
      myList = _.find('ul'),
      myItem = myList.find('li'),
      beforeClone = myItem.first().before(myItem.last().clone()),
      afterClone = myItem.last().after(myItem.first().clone());

  /* Actions */
  var swipeAction = () => {
        myList.animate({
          left: '-=' + 100 + '%'
        }, () => {
          /* -- This part doesn't work -- */
          if (myList.css('left') == (-200 + '%')) {
            myList.css({
              left: 500 + '%'
            });
          }
          /* -- This part doesn't work -- */
        });
      }
      swipeLoop = setInterval(() => {
        swipeAction();
      }, 2000);
	
  /* Logs */
  console.log(myList);
})
* {
    margin: 0;
    padding: 0;
}

ul li {
    list-style: none;
}
#swipe {

}
.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: row;
    justify-content: center;
}
.grid {
    position: relative;
    width: 1170px;
    height: 100%;
    border: 1px dashed black;
}
.inline-grid {
    position: relative;
    width: 100%;
    height: 100%;
}
.cell {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: row;
    justify-content: center;
}
._contents {
    position: relative;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}
<!-- Swipe -->
<section id="swipe">
  <div class="container">
    <div class="grid">
      <div class="inline-grid">
        <ul class="cell">
          <li class="_contents">
            <p>Test Swipe Title 1</p>
            <p>consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </li>
          <li class="_contents">
            <p>Test Swipe Title 2</p>
            <p>consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </li>
          <li class="_contents">
            <p>Test Swipe Title 3</p>
            <p>consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>
<!-- /end Swipe -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

标签： javascriptjqueryhtmlcssgrid

解决方案

您将必须获取并获取该值的 -200%（以像素为单位）width。ul然后你比较left你得到的。

变化

var ulWidth = myList.width()
if (parseInt(myList.css('left')) == parseInt(ulWidth * -2)) {
    myList.css({
        left: 100 + '%'
    });
}
$(window).resize(function() {
    ulWidth = myList.width();
});

代码笔

推荐阅读