时间戳

首页 > 解决方案 > 如果标签没有检查所有类，只检查第一个类

javascript - 如果标签没有检查所有类，只检查第一个类

问题描述

我遇到的问题是一些具有相同类但不同 id 的 div，我有另一个.icon类，我想将 id 与盒子类的 id 进行比较：

<div class="box" id="first" data-marker="first">

</div>

<div class="box" id="second" data-marker="second">

</div>

<div class="box" id="third" data-marker="third">

</div>

<div class="icon" id="first">

</div>

<div class="icon" id="second">

</div>

我写了一个这样的jQuery

$('.icon').on('click', function () {
    if($(this).attr("id") == $(".box").attr("data-marker")){
        value= $(this).attr("id");
        console.log("#" + value);
        $("#" + value ).addClass('active');
    }else{

    }
});

问题是 if 标记仅检查第一个框类，例如，如果您单击 id 为“second”的图标类，它不会检查其他框，它只检查 id 为 #first 或更好的框第一个盒子，仅此而已

标签： javascriptjqueryhtmlcssif-statement

解决方案

如果要使用.data()或data属性，请考虑此代码。

$('.icon').on('click', function(e) {
  $("#" + $(this).data("rel")).toggleClass('active');
});
.box {
  width: 200px;
  height: 100px;
  border: 1px solid #CCC;
  background: #EEE;
}

.box.active {
  border: 1px solid #2F2;
}

.icon {
  width: 20px;
  height: 20px;
  border: 1px solid #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box" id="box-1"></div>
<div class="box" id="box-2"></div>
<div class="box" id="box-3"></div>
<div class="icon" id="icon-1" data-rel="box-1"></div>
<div class="icon" id="icon-2" data-rel="box-2"></div>

这.toggleClass()对此类活动非常有帮助。

看更多：

推荐阅读