<div class="house">
<img class="house-model" src="<?php echo Yii::app()->baseUrl;?>/images/home/new/home-user-scene.png">
<a class="hight-light lever" data-item="Lever" style="left:26%;top:45%;"></a>
<a class="hight-light lever" data-item="Lever" style="left:35%;top:54%;"></a>
<a class="hight-light lever" data-item="Lever" style="left:58%;top:46%;"></a>
<a class="hight-light lever" data-item="Lever" style="left:26%;top:76%;"></a>
<a class="hight-light deadbolt" data-item="Deadbolt" style="left:42%;top:72%;"></a>
<a class="hight-light lever-deadbolt" data-item="Lever + Deadbolt" style="left:78%;top:76%;"></a>
<a class="hight-light wifi-adaptor" data-item="WiFi Adaptor" style="left:71%;top:81%;"></a>
<!---->
<div class="scene-time">
<div class="scene-time-menu-title">
<span class="icon icon-utec-lock-ul3 icon-blue icon-20"></span>
<span class="scene-menu font-16">Smart Lock</span>
</div>
<ul class="time-warp">
<li class="item-time"><b class="dot"></b><span class="scene-name">Lever</span></li>
<li class="item-time"><b class="dot"></b><span class="scene-name">Deadbolt</span></li>
<li class="item-time"><b class="dot"></b><span class="scene-name">Lever + Deadbolt</span></li>
<li class="item-time"><b class="dot"></b><span class="scene-name">WiFi Adaptor</span></li>
</ul>
</div>
</div>
is to write an animation, that is, to add class, it feels very simple, but I can"t write it out.
my idea is to slide across one of the timeline on the right, match the blue dot on the left, and then add a class.
to the matching blue dot (I added a custom attribute data-item for each blue dot). This is what I wrote:
$(".scene-time").on("hover",".item-time",function(){
var sceneName = $(this).children().text();//
var dataItem = $(this).closet("a.hight-light").attr("data-item");//data-item
if(sceneName == dataItem){
...
}else{
...
}
})
but now this dataItem cannot be taken. Do you need to traverse this blue dot?
how to write it?
correct answer:
$(".scene-time").on("hover",".item-time",function(){
var sceneName = $(this).children().text();
var dataItem;
$("a.hight-light").map(function(){
dataItem = $(this).attr("data-item");
console.log(dataItem);
if(sceneName == dataItem){
$(this).addClass("aa");
}
})
});