目标元素由 attr 然后附加类 jQuery

Target element by attr then append class jQuery

本文关键字：jQuery 然后 元素 attr 目标      更新时间：2023-09-26

>我有一个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>

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

因此，如果我选择了带有data-selector="1"的li标签，那么我的显示列表中的第一个li标签将添加类maybe。

这是我到目前为止尝试过的，但是当我控制台注销我的var时，我变得未定义： 

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

谢谢！

为了方便起见，我在点击事件中执行操作：

$("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);
});

类和属性位于同一元素上，因此您使用复合选择器，而不是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>

相关文章：