Как я могу напечатать идентификатор тега привязки на консоли, когда он щелкнут с помощью jquery?

Question

Как я могу напечатать идентификатор тега привязки на консоли, когда он щелкнут с помощью jquery?

Нужно ли кнопка будет использоваться , чтобы сделать <нав> <a HREF = "#" ID = "home" класс = "test" OnClick = "addClickListener ()"> HOME </a> <а HREF = "#" идентификатор = "о" класс = "тест" OnClick = " addClickListener () " > о </a> <а HREF = "#" ID = "услуги" класс = "Тест" OnClick = " addClickListener () " > УСЛУГИ </a> <a HREF = "#" ID = "photos" класс = "test" OnClick = "addClickListener ()"> ФОТО </a> <а HREF = "#" id = "rentals" class = "test" onclick = " addClickListener () " > RENTALS </a> </ nav>, а не тег привязки ? Я сделал попытку для функции, но я относительно новичок в jquery и не сделал большого прогресса в этом.

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

Jquery:

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

Должен ли я хранить его в переменной, а затем использовать отдельную функцию для регистрации переменной? Я потратил час, глядя на похожие вопросы на что-то, что кажется таким простым.

jquery,html,

1

Ответов: 3

JQuery, HTML,

Похожие вопросы

score 2 · Accepted Answer

2 "> принят

Вы можете использовать любой из приведенных ниже кодов. Не записывайте событие click внутри вызова функции.

  <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>



 $(document).ready(function(){
  $("a").click(function(event) {
  console.log("click " + event.target.id);
 });
 });

score 0 · Accepted Answer

0

попробуй это

this

score 0 · Accepted Answer

0

Вы можете попробовать использовать простой старый 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>