Question

如何检查单击的class是否对应于某个ID？

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" id="profile-tab" href="#">Alle machines</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="laser" href="#">Lasersnijden</a>
  </li>
</ul>

<script type="text/javascript">
    // Change class on click
    $(".nav-link").click(function() {
        $('.nav-link').removeClass('active')
        $(this).addClass("active");

        if($(this) == document.getElementById('laser')) { alert("Laser clicked."); }
    });
</script>

Answer 1

$(this)返回包装DOM对象的jQuery对象

其中

document.getElementById('laser')返回一个HTML DOM对象。

很明显，它们并不相同。如果使用$(this)，则必须使用类似以下的索引：

if($(this)[0] == document.getElementById('laser'))

// Change class on click
$(".nav-link").click(function() {
  $('.nav-link').removeClass('active')
  $(this).addClass("active");
  if($(this)[0] == document.getElementById('laser')) { 
    alert("Laser clicked."); 
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" id="profile-tab" href="#">Alle machines</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="laser" href="#">Lasersnijden</a>
  </li>
</ul>

虽然不必检查整个对象，但只需检查id

// Change class on click
$(".nav-link").click(function() {
  $('.nav-link').removeClass('active')
  $(this).addClass("active");
  if($(this).attr('id') == 'laser') { 
    alert("Laser clicked."); 
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" id="profile-tab" href="#">Alle machines</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="laser" href="#">Lasersnijden</a>
  </li>
</ul>

Answer 2

您可以像这样使用jQuery

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".nav-link").click(function(){
        $(this).addClass('active')
        var id = $(this).attr('id')
        if(id == 'laser'){
            alert("laser clicked")
        }
    });
});
</script>
</head>
<body>
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" id="profile-tab" href="#">Alle machines</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="laser" href="#">Lasersnijden</a>
  </li>
</ul>
</body>
</html>

检查点击的班级是否具有特定的ID

2 个答案: