Question

当我按下类为“ disable”的标签时，我试图打开一个弹出窗口。

这就是我现在所拥有的：当我单击类别为“ 禁用”的“ 标签链接”时，我收到一条警告，提示“ 是”，

但是当我单击没有禁用的“ 选项卡链接”时，我仍然收到一条消息，提示“ 是”。

$(".tab-link").click(function() {
  if ($(".tab-link").hasClass("disable")) {
    alert("Yes");
  } else if (!$(".tab-link").hasClass("disable")) {
    alert("No");
  }
});

a{
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#view-home" class="tab-link tab-link-active">
  <i class="icon f7-icons ios-only">today</i>
  <i class="icon f7-icons ios-only icon-ios-fill">today</i>
  <i class="icon material-icons md-only">today</i>
  <span class="tabbar-label">Home</span>
</a>
<a href="#view-games" class="tab-link disable">
  <i class="icon f7-icons">rocket_fill</i>
  <i class="icon f7-icons ios-only icon-ios-fill">rocket_fill</i>
  <span class="tabbar-label">Games</span>
</a>
<a href="#view-todo" class="tab-link disable">
  <i class="icon f7-icons">layers_alt_fill</i>
  <i class="icon f7-icons ios-only icon-ios-fill">layers_alt_fill</i>
  <span class="tabbar-label">Todo</span>
</a>
<a onclick="loadFirebase()" href="#view-download" class="tab-link disable">
  <i class="icon f7-icons">download_fill</i>
  <i class="icon f7-icons ios-only icon-ios-fill">download_fill</i>
  <span class="tabbar-label">Download</span>
</a>
<a onclick="loadFirebase()" href="#view-search" class="tab-link disable">
  <i class="icon f7-icons ios-only">search</i>
  <i class="icon f7-icons ios-only icon-ios-fill">search</i>
  <i class="icon material-icons md-only">search</i>
  <span class="tabbar-label">Search</span>
</a>

Answer 1

$(".tab-link")始终指向文档中第一个匹配的元素。

尝试使用this来引用当前点击的元素，如下所示：

$(".tab-link").click(function() {
  if ($(this).hasClass("disable")) {
    alert("Yes");
  } else{
    alert("No");
  }
});

$(".tab-link").click(function() {
  if ($(this).hasClass("disable")) {
    alert("Yes");
  } else{
    alert("No");
  }
});

function loadFirebase(){}

a{
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#view-home" class="tab-link tab-link-active">
  <i class="icon f7-icons ios-only">today</i>
  <i class="icon f7-icons ios-only icon-ios-fill">today</i>
  <i class="icon material-icons md-only">today</i>
  <span class="tabbar-label">Home</span>
</a>
<a href="#view-games" class="tab-link disable">
  <i class="icon f7-icons">rocket_fill</i>
  <i class="icon f7-icons ios-only icon-ios-fill">rocket_fill</i>
  <span class="tabbar-label">Games</span>
</a>
<a href="#view-todo" class="tab-link disable">
  <i class="icon f7-icons">layers_alt_fill</i>
  <i class="icon f7-icons ios-only icon-ios-fill">layers_alt_fill</i>
  <span class="tabbar-label">Todo</span>
</a>
<a onclick="loadFirebase()" href="#view-download" class="tab-link disable">
  <i class="icon f7-icons">download_fill</i>
  <i class="icon f7-icons ios-only icon-ios-fill">download_fill</i>
  <span class="tabbar-label">Download</span>
</a>
<a onclick="loadFirebase()" href="#view-search" class="tab-link disable">
  <i class="icon f7-icons ios-only">search</i>
  <i class="icon f7-icons ios-only icon-ios-fill">search</i>
  <i class="icon material-icons md-only">search</i>
  <span class="tabbar-label">Search</span>
</a>

jQuery，如果“ a”标签具有类

1 个答案: