当我使用jquery点击时，如何将控制台标识的ID打印到控制台？

按钮需要用来做到这一点，而不是一个锚标签？我尝试了一个函数，但我对jquery比较陌生，并没有取得很多进展。当我使用jquery点击时，如何将控制台标识的ID打印到控制台？

<nav> 
<a href="#" id="home" class="test" onclick="addClickListener()">HOME</a> 
<a href="#" id="about" class="test" onclick="addClickListener()" > ABOUT</a> 
<a href="#" id="services" class="test" onclick="addClickListener()">SERVICES</a> 
<a href="#" id="photos" class="test" onclick="addClickListener()">PHOTOS</a> 
<a href="#" id="rentals" class="test" onclick="addClickListener()">RENTALS</a> 
</nav>

JQUERY：

function addClickListener(){ 
$("a").click(function(e) { 
    console.log("click " + e.currentTarget.id); 
});}

请问我需要将其存储在一个变量，然后使用一个单独的功能来记录变量？我花了一个小时看看类似的问题，看起来很简单。

来源

2016-10-15 Adam Akers

更重要的是，你想我分享？我从来没有在这里问过一个问题，但如果我已经-2了，我一定犯了错误。我有一些CSS以外的网站没有经验，所以这可能看起来很明显，但我的道歉。 –

欢迎来到StackOverflow - 这里的一些人有点急躁，很快就会倒下。为了将来的参考，请阅读我们的[问]页面提示如何编写优秀的问题，因为他们倾向于从社区获得很好的答案。 – ochi

我添加了一个答案，解释代码的作用 – ochi

您可以使用下面的任何代码。不要在函数调用中写入点击事件。

<nav> 
<a href="#" id="home" class="test" onclick="addClickListener()">HOME</a> 
<a href="#" id="about" class="test" onclick="addClickListener()" > ABOUT</a> 
<a href="#" id="services" class="test" onclick="addClickListener()">SERVICES</a> 
<a href="#" id="photos" class="test" onclick="addClickListener()">PHOTOS</a> 
<a href="#" id="rentals" class="test" onclick="addClickListener()">RENTALS</a> 
</nav> 

function addClickListener(){ 
    console.log("click " + this.id); 
} 


OR 




<nav> 
<a href="#" id="home" class="test" >HOME</a> 
<a href="#" id="about" class="test" > ABOUT</a> 
<a href="#" id="services" class="test" >SERVICES</a> 
<a href="#" id="photos" class="test" >PHOTOS</a> 
<a href="#" id="rentals" class="test" >RENTALS</a> 
</nav> 

$("a").click(function(e) { 
    console.log("click " + this.id); 
});

来源

2016-10-15 05:04:22 GSB

试试这个

来源

2016-10-15 05:04:34

虽然此答案可能解决此问题，但解释代码为OP和其他社区中的其他人带来好处的做法是很好的做法 – ochi

您可以尝试使用老式的JavaScript。在这种情况下，你也可以传递参数this的函数调用（在这种情况下，它指的是元素被点击。

<a href="#" id="home" class="test" onclick="addClickListener(this)">HOME</a>

，在函数定义，参数为锚的DOM对象下面的标签，这样你就可以检索这样

function addClickListener(anchorObj){ 
    console.log(anchorObj.id); 
}

其属性查看正在运行的演示：

function addClickListener(anchorObj){ 
 
    console.log(anchorObj.id); 
 
}


 
<nav> 
 
    <a href="#" id="home" class="test" onclick="addClickListener(this)">HOME</a> 
 
    <a href="#" id="about" class="test" onclick="addClickListener(this)"> ABOUT</a> 
 
    <a href="#" id="services" class="test" onclick="addClickListener(this)">SERVICES</a> 
 
    <a href="#" id="photos" class="test" onclick="addClickListener(this)">PHOTOS</a> 
 
    <a href="#" id="rentals" class="test" onclick="addClickListener(this)">RENTALS</a> 
 
</nav>

但是，因为你问过如何在JQuery中做到这一点。我也会告诉你这个。

下面的代码将onclick事件侦听器绑定到文档中的所有定位标记。

$('a').on('click', function() {...}

让我知道你是否需要澄清代码的作用。

// wrap your definition in this to ensure the document is ready first 
 
$(function() { 
 
    // bind an event listener to the anchor tags 
 
    $('a').on('click', function() { 
 
    // this refers to the anchor tag clicked on. 
 
    console.log($(this).attr('id')); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<nav> 
 
    <a href="#" id="home" class="test">HOME</a> 
 
    <a href="#" id="about" class="test">ABOUT</a> 
 
    <a href="#" id="services" class="test">SERVICES</a> 
 
    <a href="#" id="photos" class="test">PHOTOS</a> 
 
    <a href="#" id="rentals" class="test">RENTALS</a> 
 
</nav>

来源

2016-10-15 05:31:40 ochi

当我使用jquery点击时，如何将控制台标识的ID打印到控制台？

回答

相关问题