Question

如何编写执行此操作的脚本？

如果div类“test”具有属性translate3d (0px, 100px, 0px)，则将“active”类添加到此处，否则将其删除。

我试过这样的事情，但这不对......

setInterval(function(){
  if($('.test').css('transform') == 'translate3d(0px, 100px, 0px)') {
    $('.test').addClass('active');
  } else {
    $('.test').removeClass('active');
  }
}, 1);

Answer 1

您需要使用正则表达式匹配，如下所示： -

＆＃13;

$(document).ready(function(){
  $('.test').each(function(){
    console.log($(this).css('transform') == 'matrix(1, 0, 0, 1, 0, 100)');
    if($(this).css('transform') == "matrix(1, 0, 0, 1, 0, 100)"){
      $(this).addClass('active');
    } else {
      $(this).removeClass('active');
    }
  });
});

＆＃13;

.active {
  color: red;
  font-size: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test" style="transform:translate3d(0px, 100px, 0px)">Hello</div><br/><br/>
<div class="test" style="transform:translate3d(10px, 10px, 100px)">Hello</div>

＆＃13;

注意： - 检查console.log()值，您会看到它是一个矩阵

参考文献： - Get translate3d values of a div?

要检查任何元素是否具有transform属性，请使用以下正则表达式： -

/matrix(?:(3d)\(\d+(?:, \d+)*(?:, (\d+))(?:, (\d+))(?:, (\d+)), \d+\)|\(\d+(?:, \d+)*(?:, (\d+))(?:, (\d+))\))/)

如果元素翻译3d ... addClass

1 个答案: