используйте «это» в гиперссылке на клик

0

Код HTML:

<a id='link1' href='#' name='john' >test</a>
<br/><br/>
<a id='link2' href='#' name='john' onclick="showName();">test</a>
<br/><br/>
<a id='link3' href='#' name='smith' onclick="showName();">test</a>

Код JScript:

$(function()
  {
      $('#link1').on('click', function(){
          alert($(this).attr('name'));
      });
  }
)

function showName()
{
    alert($(this).attr('name'));
}

И скрипка: http://jsfiddle.net/eS7Mv/7/

Почему вторая и третья ссылки не работают? Кстати, мне нужно использовать именованную функцию по некоторым причинам. Поэтому я знаю, что:

 $('a').on('click', function(){
          alert($(this).attr('name'));
      });

Или

 $('.TargetClass').on('click', function(){
          alert($(this).attr('name'));
      });

Как-то решит проблему, но мне нужно работать с именованными функциями и получить доступ к атрибутам гиперссылки.


Обновление: Спасибо всем, кто внес свой вклад в эту тему. Я не могу вас поблагодарить. Я ценю их всех, но поскольку есть несколько правильных ответов, я не знаю, как отмечать все эти ответы в качестве ответа в одно и то же время.

  • 0
    Прежде всего они имеют общий id который является недействительным, они должны быть уникальными ..
  • 0
    Вы связываете событие click для этих тегов, которое вызовет обработчик до jQuery. И вы не передаете элемент в качестве аргумента. Так что ты ищешь? Вот может быть: jsfiddle.net/eS7Mv/14
Показать ещё 8 комментариев
Теги:
events

10 ответов

3

используйте этот код

html-код

<a id='link1' href='#' name='john' >test</a><br/><br/>
<a id='link2' href='#' name='john' onclick="showName(this);">test</a><br/><br/>
<a id='link3' href='#'name='smith'onclick="showName(this);">test</a>

Код jquery -

 function showName(obj)
{
alert($(obj).attr('name'));
}
2

попробуй это

Демо-скрипт http://jsfiddle.net/eS7Mv/18/

<a id='link1' href='#' name='john' >test</a>
<br/><br/>
<a id='link2' href='#' name='john' onclick="showName(this);">test</a>
<br/><br/>
<a id='link3' href='#' name='smith' onclick="showName(this);">test</a>
<script>
    function showName(element)
{
    alert($(element).attr('name'));
}
</script>

showName(this) вы передаете текущий элемент функции.

Изменить 2

Обновлена скрипка http://jsfiddle.net/eS7Mv/22/

  • 0
    Почему функция showName должна быть здесь? Почему это не работает при перемещении в раздел скриптов?
  • 0
    'showName' должно быть функцией golbal
Показать ещё 1 комментарий
1

просто посмотрите на скрипку: скрипка

вы должны передать параметр this, а затем использовать этот параметр внутри функции

function showName(pthis)
{
    alert($(pthis).attr('name'));
}

<a id='link3' href='#' name='smith' onclick="showName(this);">test</a>
1

попробуй что-нибудь вроде этого

HTML

<a id='link3' href='#' name='smith' onclick="showName(this);">test</a>

Javascript

function showName(obj)
{
    alert(obj.name);
   //or
   alert($(obj).attr('name'));
}
  • 0
    Obj.name меня очень привлекло, так как я никогда раньше такого не видел. Спасибо.
1

вторая и третья ссылки не должны работать, потому что в вашей функции javascript "this" указывает текущий объект, поэтому в то время javascript не может найти текущий объект, поэтому вам необходимо передать "это" в аргументе функции..

0

Это особенность jQuery, "это" в функции, связанной с этим:

Если вызываемая функция была создана с использованием функции Function.bind(), это будет первый аргумент, который был передан.bind() во время создания функции.

http://learn.jquery.com/javascript-101/this-keyword/

Ваши другие встроенные функции не работают, так как "это" - текущий контекст исполнения (я думаю, окно).

Если вам действительно нужно использовать именованные функции, вы могли бы сделать это:

$(function()
  {
      $('#link1').on('click', function(){
          showName($(this));
      });
  }
)

function showName(clickedLink)
{
    alert(clickedLink.attr('name'));
}

Маленькая скрипка, иллюстрирующая некоторые из этих:

http://jsfiddle.net/4axju/1/

0

Если все ваши теги начинаются со link, вы можете сделать это

  $('[id^=link]').on('click', function(){
          alert($(this).attr('name'));
      });

Рабочая демонстрация

0

Вот обновленный working code => http://jsfiddle.net/eS7Mv/13/

Вы должны сохранить некоторое общее свойство между всеми элементами, которые затем будут доступны JQuery, и вы можете связывать события с теми, кто тогда

Согласно вашему комментарию, вы можете использовать именованные функции. Сообщите мне, могу ли я помочь вам с большим количеством кода.

$(function()
  {
      $('.click').on('click', showName );
  }
)

function showName()
{
    alert($(this).attr('name'));
   // alert("Hello World");
}

Это обновленная скрипка => http://jsfiddle.net/eS7Mv/26/

  • 0
    Я должен использовать именованную функцию.
  • 0
    @SC Я обновляю свой ответ, который поможет вам использовать именованные функции. Я надеюсь, что вам нужно что-то вроде этого.
-1

Решение | скрипка

Вы ищете e.target.node, так что:

$('body').on('click', function(e){
    alert(e.target.name);    
});

Упростите свою жизнь.

Кроме того, если вы не хотите, чтобы он выполнялся для всего body, вы также можете:

$('#link1, #link2, #link3').on('click', function(e){

Причина, по которой вы предыдущий код не работали, была из-за правил. В документах jQuery указано, что "Если вызываемая функция была создана с использованием функции Function.bind(), this будет первый аргумент, который был передан.bind() во время создания функции". Думаю, в вашем случае это было неопределенным.

Используя консольную функцию в Chrome, я оказался прав. Посмотрите на этот снимок экрана и попытайтесь понять, что происходит. Вы видите, что делаете неправильно?

Изображение 174551 Когда события поднимаются, например событие щелчка, они несут важную информацию и ссылки вокруг них. В событии click объект события имеет ссылку на цель. Используя это, вы можете получить идентификатор элемента, который поднял событие.

-1

Атрибут onclick работает только тогда, когда JS-код находится перед этим тегом html или указанная функция не будет найдена.

В вашем примере это работает: http://jsfiddle.net/eS7Mv/20/

Но jQuery - лучший способ пойти на вас, например:

$('a').click(function(){
    alert($(this).attr('name'));
});
  • 0
    Так что для этого мы можем использовать .ready() так что в любом случае это не отвечает на его вопрос
  • 0
    Оно делает. Он спросил, почему это не работает.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню