если тэг не проверяет все классы и просто заканчивается проверкой первого - PullRequest
Новая
       20

если тэг не проверяет все классы и просто заканчивается проверкой первого

0 голосов
/ 22 декабря 2019

Проблема в том, что у меня есть некоторые div с тем же классом, но с другим идентификатором, как это, и у меня есть другой класс .icon, который я хочу сравнить с идентификаторами классов box: 

<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{

    }
});

Проблема в том, что если тег проверяет только первый класс ящика, например, если вы нажимаете на значок класса с идентификатором «второй», он не проверяет другой ящик ион устанавливает флажок только с идентификатором #first или лучше сказать первое поле, и это все

1 Ответ

1 голос
/ 22 декабря 2019

Если вы хотите использовать .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() может быть очень полезным для этого вида деятельности.

См. Подробнее:

...