如何编写一个脚本来执行此操作?
如果 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);
最佳答案
您需要使用正则表达式匹配如下所示:-
$(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+))\))/)
关于jquery - 如果元素翻译 3d ... addClass,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45372935/