Как получить нажатый элемент DOM?

Question

Как правило, в чистом js или jquery или в контексте рельсов, как вы получаете элемент DOM, который был нажат?

Обычно вы делаете что-то подобное, что позволяет использовать $(this).whatever_method

$(#something).on('click', function() 
{ 
    $(this).do_something; 
}_; 

Но в моем случае, у меня есть ссылка в моем HTML, удаленный: верно, и в моем контроллере я вынести JS. erb-файл. В таком сценарии все javascript-коды в файле js.erb выполняются. Нет места для прослушивателя кликов, поскольку единственная причина, по которой этот файл js.erb выполняется, состоит в том, что что-то уже было нажато. но я хочу выбрать элемент DOM, который был нажат. Как мне это сделать?

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

---

HTML

<%= link_to "text", send(some_path, @votable, vote_type: "#{s.name}"), remote: true, class: "option" %> 
<%= link_to "text", send(some_path, @votable, vote_type: "#{s.name}"), remote: true, class: "option" %> 

Контроллер

def action 
    render 'shared/vote' 
end 

/views/shared/vote.js.erb

// how to obtain the link that i clicked in the html file (i.e. the first `".option"` link rather than the second. 
// would using `$(this)` here, work? it seems wrong. 

Answer 1

Ajax

Даже если вы используете remote: true, есть еще место для click слушателя. Вы, вероятно, лучше всего с помощью ajax hooks с элементом, который инициирует вызов удаленного АЯКС:

$(document").on("ajax:beforeSend", "#your_element", function(){ 
    $(this).hide(); -> hides element 
}); 

Я думаю, что вы будете в состоянии использовать это по вяжущего .click событий в вашем примере. Причина быть, хотя вы может позвонить click, он по существу не имеет никакого отношения к вызову ajax; в то время как с помощью одного из ajax hooks будет иметь определенное влияние на это

-

Rails

В отношении вашего Rails бэкэнда (ваш .js.erb файл), вы просто не сможете ссылаться $(this) с этой частью вашего приложения. Причина в том, JS работает с DOM - то есть он может только наблюдать как элементы на экране и те в правильной области видимости функции

Если вы хотите, чтобы взаимодействовать со ссылками непосредственно, вы должны смотреть на использование одного из ajax hooks, о которых я упоминал выше, с интерактивностью страницы, предоставленной бэкендом .js.erb файл, упомянутый

Answer 2

В Vanilla JavaScript this в функции обратного вызова функции addEventListener - это элемент, инициировавший событие.

Пожалуйста, обратитесь эту fiddle

Разметка:

<input type="button" value="Click Me" id="button" /> 

JavaScript

document.querySelector('#button').addEventListener('click', function(e){ 
    console.log(this); 
}) 

Answer 3

На самом деле, ваш образ мышления немного неправильно, потому что js.erb будет выполняется после отправки нового запроса на сервер , поэтому вы не сможете связать его с текущим элементом DOM.

Для достижения вашей цели, я думаю, вам следует назначить каждой ссылке уникальный идентификатор, а затем передать этот идентификатор на сервер вместе с параметрами запроса. И затем на вашем js.erb вы сможете использовать этот идентификатор, чтобы правильно идентифицировать ссылку.

Ex:

<%= link_to "Test link", some_path(link_id: "link_1"), remote: true, id: "link_1" %> 

<%= link_to "Test link 2", some_path(link_id: "link_2"), remote: true, id: "link_2" %> 

Контроллер

def my_action 
    @link_id = params[:link_id] 
end 

JS.Еврорадио

console.log($("#<%= @link_id %>"));