如果元素转换为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

回答

相关问题