Question

我有<div>，其中有三个标签。在<div>内，所有三个标签都有自己的<div>。我想在每次用户点击它时记录选项卡的名称。这是代码：

＆＃13;

jQuery('.hptabs').mousedown(function(e) {
  var tabname = jQuery(this).attr.('text');
  console.log(tabname);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="hptabs">
  <div class="tab active">Tab 1</div>
  <div class="tab second">Tab 2</div>
  <div class="tab">Tab 3</div>
</div>

＆＃13;

因此，结果是在日志中获取所有三个名称，而不是仅记录我单击的名称。

Answer 1

jQuery('.tab').click(function(e)  {
    var tabname = jQuery(this).text();
    console.log(tabname);
});

Answer 2

您需要使用on调用中的第二个参数来使用事件委派。（click或mousedown直接事件处理程序从v1.7起不再使用.Ref：http://api.jquery.com/on/）另外，如果要提取文本，请立即使用.text()方法。 text不是属性，因此attr无法在此处使用。

＆＃13;

$('.hptabs').on("click", ".tab", function(e)  {
  var tabname = $(this).text();
  console.log(tabname);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hptabs">
    <div class="tab active">Tab 1</div>
    <div class="tab second">Tab 2</div>
    <div class="tab">Tab 3</div>
</div>

＆＃13;

Answer 3

试试这段代码，

jQuery('.hptabs div').click(function(e)  {
    var tabname = jQuery(this).text();
    console.log(tabname);
});

Answer 4

根据您的描述，这是正确的代码。

jQuery('.hptabs div').click(function(){
    var tabName=jQuery(this).text();
    console.log(tabName);
});

Answer 5

您在整个div上捕获click，因此this是div。当然，包括所有三个标签的文本。

点击选项卡本身的点击次数：

jQuery('.hptabs .tab').mousedown(function(e)  {
    var tabname = jQuery(this).text();
    console.log(tabname);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="hptabs">
    <div class="tab active">Tab 1</div>
    <div class="tab second">Tab 2</div>
    <div class="tab">Tab 3</div>
</div>

Answer 6

您可以执行以下代码：

    var container = $('.hptabs');
    container.on('click', '.tab', function(e)  {
      var tabText = $(this).text();
      console.log(tabText);
    });

从子div获取文本

6 个答案: