如果元素翻譯3d…addClass

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

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

 $(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'); } }); }); 

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

 <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> 

注意：-檢查console.log()值，您將看到它是一個矩陣

參考：- 獲取div的translation3d值？

要檢查任何元素是否具有transform屬性，請使用以下正則表達式：-

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