代码之家 › 专栏 › 技术社区 › Muiter

检查单击的类是否具有特定ID

html jquery

-1

Muiter · 技术社区 · 7 年前

如何检查 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>

2 回复 | 直到 7 年前

Mamun 7 年前

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

作为

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

$(本)

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

<<li class=“nav item”>
</li>
<li class=“nav item”>
<a class=“nav link”id=“laser”href=“#”>激光nijden</a>
</li>
</ul>

Vishnu Chauhan 7 年前

您可以这样使用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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

8 月前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

8 月前

user28928120 · 如何在jquery中选择所有类?

9 月前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

9 月前