1

我有一个具有 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>

4

4 回答 4

7

因为您没有向函数传递任何参数，所以它不知道是什么$(this)。尝试：

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

和

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

jsFiddle 示例

更好的是，摆脱内联 JavaScript 并添加一个 jQuery 事件处理程序（在 document.ready 调用中或在 DOM 中存在元素之后）以进行更改：

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

jsFiddle 示例

于 2013-06-24T19:36:33.687 回答
2

onchange从标记中删除事件并为我们的 jQuery 选择器添加一个 css 类名。我添加了一个名为的 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 选择器中使用它。您可以在 jQuery 选择器中使用 name 属性。但是，如果您想对多个SELECT元素执行相同的行为，最好使用 CSS 类而不是名称对它们进行分组。我更喜欢尽可能地为元素保留唯一的名称。

于 2013-06-24T19:36:04.437 回答
1

而不是

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

您应该将事件附加到 javascript 本身中的元素。然后你可以使用 $(this) 选择器。

例如

$('select').change(function() {
    var channeltoupdate = $(this).closest('tr').attr('id');
    console.log(channeltoupdate);
});
于 2013-06-24T19:36:04.450 回答
1

只需使用事件绑定。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
  ...
}
于 2013-06-24T19:36:19.770 回答