如果元素轉換爲3D ... addClass

如果div類「test」有屬性translate3d (0px, 100px, 0px)添加到此「活動」類別刪除它。

我想是這樣的，但是這是不對的......

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

來源

2017-07-28 Andrea

你需要做的是像下面使用正則表達式匹配： -

$(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()的值，你會看到它是一個矩陣

參考摘自： - Get translate3d values of a div?

要檢查的任何元素都轉換屬性，或者不使用正則表達式如下： -

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

來源

2017-07-28 12:03:52

謝謝，現在我記錄的正則表達式匹配。我不明白在你的例子qul中的控制值：如果我只想在translate3d（0px，100px，0px）的時候打上「hello」的紅色，而不是在有另一個值的時候。 – Andrea

@Andrea我現在改變了我的代碼。請檢查並讓我知道你是否得到它？ –

謝謝，我明白我錯了。謝謝！ – Andrea

如果元素轉換爲3D ... addClass

回答

相關問題