attr的target元素然后追加类jQuery

时间:2016-01-29 15:02:19

标签: javascript jquery html

我有li标记,如下所示:

<li class="item maybe" data-selected="1"></li>
<li class="item confused" data-selected="2"></li>
<li class="item why" data-selected="3"></li>

然后我有三个看起来像的其他元素:

<li class="display"></li>
<li class="display"></li>
<li class="display"></li>

我正在尝试选择其中一个元素将该类附加到我的第二个元素列表中。

因此,如果我选择li标记data-selector="1",则我的显示列表中的第一个li标记会添加maybe类。

这是我到目前为止所尝试过的,但是当我控制登录我的var时,我得到了未定义:

if ($('.item').attr('data-selected') == 1) {
  var itemClassAdd = $('.item').find("[data-selected='1']").attr('class');
  console.log(itemClassAdd);

  $(".display").addClass(itemClassAdd);
}

谢谢!

2 个答案:

答案 0 :(得分:2)

为方便起见,我在点击事件中执行操作:

$("li.item").click(function(){
    var index = $(this).data("selected");

    $("li.display").eq(index - 1).addClass($(this).attr("class"));
});

如果您不需要课程项目:

$("li.item").click(function(){
    var index = $(this).data("selected");
    var c = $(this).attr("class").replace("item ", "");        

    $("li.display").eq(index - 1).addClass(c);
});

答案 1 :(得分:0)

类和属性位于相同的元素上,因此您使用复合选择器,而不是find

var itemClassAdd = $('.item[data-selected="1"]').attr('class');

但请注意

if ($('.item').attr('data-selected') == 1) {

只会匹配.item第一个元素的分支data-selected="1",这可能是您想要的,也可能不是。

直播示例:

if ($('.item').attr('data-selected') == 1) {
    var itemClassAdd = $('.item[data-selected="1"]').attr('class');
    $(".display").addClass(itemClassAdd);
}
.maybe {
  color: green;
}
<ul>
  <li class="item maybe" data-selected="1">maybe</li>
  <li class="item confused" data-selected="2">confused</li>
  <li class="item why" data-selected="3">why</li>
</ul>
<ul>
  <li class="display">d1</li>
  <li class="display">d2</li>
  <li class="display">d3</li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>