Как отрегулировать текущий элемент?

Question

У меня есть элемент, который имеет onchange = "", и я хочу найти идентификатор .closest ('tr')

Проблема в том, что я не могу понять, как обращаться к элементу I просто изменился без использования уникального идентификатора (поскольку на странице может быть больше одного этого элемента). Я думал, что это какой-то $ (это), но это, похоже, не работает.

Вот мой код:

JS:

function updateChannel(){ 
    var channeltoupdate = $(this).closest('tr').attr('id'); 
    console.log(channeltoupdate); 
} 

HTML:

<tr id="U4Rxv"> 
<td> 
    <select name="resolution" onchange="updateChannel();"> 
     <option value="">Select a resolution:</option> 
     <option value "1.3"="">1.3 Megapixel</option> 
     <option value="2">2 Megapixel</option> 
     <option value="3">3 Megapixel</option> 
     <option value="5">5 Megapixel</option> 
     <option value="VGA">VGA</option> 
    </select> 
</td> 
<td></td> 
<td></td> 

Answer 1

Потому что вы не передаете никаких аргументов в функцию, так что он не знает, что $(this) есть.Попробуйте:

<select name="resolution" onchange="updateChannel(this);"> 

и

function updateChannel(foo){ 
    var channeltoupdate = $(foo).closest('tr').attr('id'); 
    console.log(channeltoupdate); 
} 

jsFiddle example

еще лучше, избавиться от встроенного JavaScript и добавить обработчик событий JQuery (в пределах document.ready вызова или после того, как элементы существуют в DOM) для изменения:

$('select[name="resolution"]').change(function(){ 
    var channeltoupdate = $(this).closest('tr').attr('id'); 
    console.log(channeltoupdate); 
}); 

jsFiddle example

Answer 2

удалить onchange событие из разметки и добавить имя класса CSS для нашего Селектор jQuery. Я добавил имя класса CSS под названием lookable

<select name="resolution" class="lookable"> 
    <option value "1.3"="">1.3 Megapixel</option> 
    <option value="2">2 Megapixel</option> 
</select> 

и сценарий является

$(function(){ 

    $("select.lookable").change(function(e){ 
    var _this=$(this); 
    // _this is the current SELECT element. Use that now 
    var updatedChannel=_this.closest('tr').attr('id'); 
    console.debug(updatedChannel); 
    }); 

}); 

Добавление имени класса CSS и использовать его в селекторе Jquery не нужно. Вы можете использовать атрибут name в селекторе jQuery. Но если вы хотите сделать то же поведение для нескольких SELECT элементов, рекомендуется группировать их, используя класс CSS, а не имя. Я предпочитаю хранить уникальное имя для элементов как можно больше.

Answer 3

вместо

<select name="resolution" onchange="updateChannel();"> 

Вы должны прикрепить событие к элементу в самом JavaScript. Затем вы можете использовать селектор $ (this).

E.g.

$('select').change(function() { 
    var channeltoupdate = $(this).closest('tr').attr('id'); 
    console.log(channeltoupdate); 
}); 

Answer 4

Просто используйте привязку событий. this в вашей разметке должно быть обращено к окну.

$(function(){ 

    $('[name="resolution"]').change(updateChannel) 
} 

function updateChannel() 
{ 
    var channeltoupdate = $(this).closest('tr').attr('id'); // here now this will be the select element 
    console.log(channeltoupdate); 
} 

Или попробовать этот способ, используя call.

<select name="resolution" onchange="updateChannel.call(this);"> 

Теперь внутри функции this будет выбрать элемент.

или явно передать аргумент

<select name="resolution" onchange="updateChannel(this);"> 

и принять его

function updateChannel(elem) 
{ 
// here now elem will be the select element 
    ... 
}