Question

我有一个onchange =“”的元素，我想找到.closest（'tr'）的ID

问题是，我无法弄清楚如何引用我刚刚更改的元素而不必使用唯一标识符（因为页面上可能有多个此元素。）我认为它是某种$（这） - 但这似乎不起作用。

这是我的代码：

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事件，并为我们的jQuery选择器添加一个css类名。我添加了一个名为lookable

的css类名

<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选择器中使用它是没有必要的。您可以在jQuery选择器中使用name属性。但是，如果要对多个 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元素。

或显式传递参数

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

并接受

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

如何引用当前元素被更改？

4 个答案: