Текст щелкнули ссылку

Question

<ul class="Buttons"> 
    <li><a href="#" onclick="myFunc(); return false;">Accept</a></li> 
    <li><a href="#" onclick="myFunc(); return false;">Reject</a></li> 
    <li><a href="#" onclick="myFunc(); return false;">On Hold</a></li> 
    <li><a href="#" onclick="myFunc(); return false;">Completed</a></li> 
</ul> 

В моем script.js:

var myFunc = function() { 
    // I want to get the Text of the link e.g. if the first list item link is 
    // clicked, store "Accept" in a variable. 
}; 

Как я могу добиться этого?

Answer 1

Вы можете передать текущую ссылку в качестве аргумента функции:

<ul class="Buttons"> 
    <li><a href="#" onclick="myFunc(this); return false;">Accept</a></li> 
    <li><a href="#" onclick="myFunc(this); return false;">Reject</a></li> 
    <li><a href="#" onclick="myFunc(this); return false;">On Hold</a></li> 
    <li><a href="#" onclick="myFunc(this); return false;">Completed</a></li> 
</ul> 

, а затем использовать innerHTML свойства для извлечения текста внутри:

var myFunc = function (link) { 
    alert(link.innerHTML); 
}; 

---

UPDATE:

Я не заметил, что на самом деле ваш вопрос помечен jQuery. В этом случае я бы порекомендовал вам ненавязчиво подписавшись на обработчик щелчка:

<ul class="Buttons"> 
    <li><a href="#">Accept</a></li> 
    <li><a href="#">Reject</a></li> 
    <li><a href="#">On Hold</a></li> 
    <li><a href="#">Completed</a></li> 
</ul> 

и в отдельном JS файл:

$(function() { 
    $('.Buttons a').click(function() { 
     alert($(this).text()); 
     return false; 
    }); 
}); 

---

UPDATE 2:

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

<ul class="Buttons"></ul> 

, а затем, когда происходит какое-то событие (щелчок или что-то) вы добавляете якорь динамически:

$('<li/>', { 
    html: $('<a/>', { 
     href: '#', 
     text: 'some text ....', 
     click: myFunc 
    }) 
}).appendTo('.Buttons'); 

где вы определили myFunc где:

var myFunc = function() { 
    alert($(this).text()); 
    return false; 
} 

Answer 2

Поскольку вы, кажется, с помощью JQuery ...

$("ul.buttons > li > a").click(function() { 
    alert($(this).text()); 

    myFunc(this); 
    return false; 
}); 

... и удалить эти onclick погрузчики. ;)

Answer 3

$(function(){ $('.Buttons').click(function(){ alert($(this).html(); }) }) 

Answer 4

Если вы используете JQuery, то вы можете связать с элементами, как это:

//wait for document.ready to fire 
$(function() { 

    //find the links in the `.Button` list and bind a click event handler to them 
    $('.Buttons').find('a').on('click', function() { 

     //alert the text of the clicked element 
     alert($(this).text()); 

     //prevent the normal behavior of the link, also stop the propagation of the event so no other elements fire event handlers for this event 
     return false; 
    }); 
}); 

Обратите внимание, что .on() нового в JQuery 1.7 и в этом случае такая же, как с помощью .bind(): http://api.jquery.com/on

Ваш HTML бы тогда не нужны никакие JS в нем:

<ul class="Buttons"> 
    <li><a href="#">Accept</a></li> 
    <li><a href="#">Reject</a></li> 
    <li><a href="#">On Hold</a></li> 
    <li><a href="#">Completed</a></li> 
</ul> 

Answer 5

$(this).text() должен работать на вас.

Answer 6

$('.Buttons li a').click(function(event) { 
     var myVariable = $(this).text(); 
     alert(myVariable); 
     event.preventDefault(); 
    });