Question

我正在尝试为已经构建的javascript滑块添加功能。我正在尝试添加人们可以点击的视频图像，以便将它们带到幻灯片中的正确视频中。我试图用jQuery实现这一目标。我想知道如何在div.navBulletsWrapper中获取div的属性。我的代码目前似乎将所有div更改为rel =“0”而不是获取rel值并相应地设置类。谢谢你的帮助。

HTML：

<div class="video-thumbnail">
    <a id="video-thumbnail1">
       <img src="/_images/VideoImages/btn_FreeConsultation.png" />
    </a>
</div>

这是由滑块javascript动态创建的：

<div class="navBulletsWrapper">
    <div class="active" rel="0"> … </div>
    <div rel="1"> … </div>
    <div rel="2"> … </div>
    <div rel="3"> … </div>
</div>

jQuery的：

$(document).ready(function(){

    $('#video-thumbnail1').click(function(){
        $('div.navBulletsWrapper div').attr("rel", "0").addClass("active");
    });

});

直播网站，以防您想要查看完整代码：http://www.hazeltonlawgroup.com

Answer 1

$('div.navBulletsWrapper div').attr("rel", "0")

此设置具有属性rel="0" .

的所有子div

如果你想要定位那个div ..那么你的选择器应该看一下这些行。

$('div.navBulletsWrapper').find("[rel='0']").addClass("active");

Answer 2

如果要根据其属性找到div，则必须使用selector：

$('div.navBulletsWrapper div[rel="0"]').addClass('active') ;

如果你想从其他div中删除类：

$('div.navBulletsWrapper div:not([rel="0"])').removeClass('active')

Answer 3

使用attar方法，您可以设置并获取属性。

el.attr('attribute',value')

设置属性。

el.attr('attribute')

获取属性值。

只需将代码更改为

即可

$(document).ready(function(){

    $('#video-thumbnail1').click(function(){
        $('div.navBulletsWrapper div[rel='+index+']').addClass("active");
    });

});

其中 index 是您要添加“有效”类

的元素

Answer 4

另一种方式

$('div.navBulletsWrapper div').filter("[rel=0]").addClass("active");

或

$('div.navBulletsWrapper').find("div[rel=0]").addClass("active");

jQuery获取属性然后在单击div时添加类

4 个答案: