Question

实际上这是如此简单的功能，但我不明白为什么我的功能不起作用？我想获得当前的链接类或属性...但它给了我一个'未定义'的结果。另一个问题是我想获取id，类或其他属性只有当我点击链接但如果我点击我的另一个地方文件比它的行为好像我点击链接链接

$(function() {

  var tabMenuLink = $(".nav-tabs li a"),
    tabId = tabMenuLink.attr("class");
  $(document).on("click", tabMenuLink, function() {
    alert(tabId);
  });
});

ul {
  width: 700px;
  margin: 100px auto;
}

ul li {
  padding: 10px;
}

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>

<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#otel-ara" aria-controls="otel-ara" role="tab" data-toggle="tab" class="otel-ara-tab">OTEL</a></li>
  <li role="presentation"><a href="#tur-ara" aria-controls="tur-ara" role="tab" data-toggle="tab" class="tur-ara-tab">TUR</a></li>
  <li role="presentation"><a href="#ucak-ara" aria-controls="ucak-ara" role="tab" data-toggle="tab" class="ucak-ara-tab">UÇAK</a></li>
  <li role="presentation"><a href="#gemi-ara" aria-controls="gemi-ara" role="tab" data-toggle="tab" class="gemi-ara-tab">GEMİ</a></li>

</ul>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>

Answer 1

这会奏效。我不确定你是否会失去范围。

$(function() {

  var tabMenuLink = $(".nav-tabs li a"),
    tabId = tabMenuLink.attr("class");
  $(document).on("click", tabMenuLink, function() {
    var tabId = $(this).attr('class');
    alert(tabId);
  });
});

ul {
  width: 700px;
  margin: 100px auto;
}

ul li {
  padding: 10px;
}

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>

<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#otel-ara" aria-controls="otel-ara" role="tab" data-toggle="tab" class="otel-ara-tab">OTEL</a></li>
  <li role="presentation"><a href="#tur-ara" aria-controls="tur-ara" role="tab" data-toggle="tab" class="tur-ara-tab">TUR</a></li>
  <li role="presentation"><a href="#ucak-ara" aria-controls="ucak-ara" role="tab" data-toggle="tab" class="ucak-ara-tab">UÇAK</a></li>
  <li role="presentation"><a href="#gemi-ara" aria-controls="gemi-ara" role="tab" data-toggle="tab" class="gemi-ara-tab">GEMİ</a></li>

</ul>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>

Answer 2

你的js代码不对。将click事件添加到li a并获取clicked元素的类。试试这个：

$(function() {

  var tabMenuLink = $(".nav-tabs li a");

  tabMenuLink.on("click", function() {
    tabId = $(this).attr("class");
    alert(tabId);
  });
});

Answer 3

 $(function() {
  $('.nav-tabs li a').on("click", function() {
    alert($(this).attr('class'));
    alert($(this).attr('id'));
  });
});

在li标签中添加属性ID并更改您的Jquery代码

Answer 4

您也可以像这样使用

$(function() {
   $(document).on("click",'.nav-tabs li a', function() {
      tabId = $(this).attr("class");
      alert(tabId);
   });
})

为什么我无法获得点击元素属性？

4 个答案: