$(this).attr("id")无法工作

Question

正如标题所述，当我尝试获取元素的id属性时，我一直得到“未定义”的结果，基本上我的目标是在值为“其他”时用输入框替换元素。

以下是代码:

function showHideOther(obj) {
    var sel = obj.options[obj.selectedIndex].value;
    var ID = $(this).attr("id");
    alert(ID);

    if (sel == 'other') {
        $(this).html("<input type='text' name='" + ID + "' id='" + ID + "' />");

    } else {
        $(this).css({
            'display': 'none'
        });
    }
}

HTML：

          <span class='left'><label for='race'>Race: </label></span>
          <span class='right'><select name='race' id='race' onchange='showHideOther(this);'>
            <option>Select one</option>
            <option>one</option>
            <option>two</option>
            <option>three</option>
            <option value="other">Other</option>
          </select>
          </span>

可能是我没有注意到的一些小问题，我做错了什么？

- Odyss3us

Answer 1

改变

var ID = $(this).attr("id");

var ID = $(obj).attr("id");

你也可以将其更改为使用jQuery事件处理程序：

$('#race').change(function() {
    var select = $(this);
    var id = select.attr('id');
    if(select.val() == 'other') {
        select.replaceWith("<input type='text' name='" + id + "' id='" + id + "' />");
    } else {
        select.hide();
    }
});

- fantactuka

---

如果它是从 onchange="" 属性传递的，它将是一个指向 HTMLElement 的引用，而不是 jQuery 对象。 - fantactuka

Answer 2

您在函数中使用了this，但应该使用参数。

只有在回调函数中才使用$(this)...例如从选择器中：

$('a').click(function() {
   alert($(this).href);
})

结束时，正确的方式（使用您的代码示例）是这样的： obj.attr('id'); 它会返回元素的ID属性。

- dockeryZ

---

“this” 总是指代你正在操作的对象。它可以在任何地方使用，当然，前提是你知道自己在做什么。 - Germán Rodríguez

你可以使用 this.href 替代 $(this).href，同样地，obj.id 也应该改为 $(obj).attr('id')，这是基于 OP 的建议。 - Reigel Gallarde

Answer 3

由于函数的调用方式（即作为函数变量的简单调用），this 是全局对象（在浏览器中，window 是其别名）。请改用 obj 参数。

此外，创建一个jQuery对象并使用其 attr() 方法获取元素ID是低效且不必要的。只需使用元素的 id 属性即可，在所有浏览器中都适用。

function showHideOther(obj){ 
    var sel = obj.options[obj.selectedIndex].value;
    var ID = obj.id;

    if (sel == 'other') { 
        $(obj).html("<input type='text' name='" + ID + "' id='" + ID + "' />");
    } else {
        $(obj).css({'display' : 'none'});
    }
}

- Tim Down

Answer 4

您也可以将整个函数编写为jQuery扩展，这样您就可以执行类似于`$('#element').showHideOther();`的操作。

(function($) {
    $.extend($.fn, {
        showHideOther: function() {
            $.each(this, function() {
                var Id = $(this).attr('id');
                alert(Id);

                ...

                return this;
            });
        }
    });
})(jQuery);

并不是回答你的问题...只是提供一些思路。

- efritz

Answer 5

我遇到了类似的问题。

`var ID = $(this).attr("id");`

有时候在使用箭头函数时，可以使用这种方法 (`

$('div).click(()=>{
console.log($(this).attr("id"))
}

使用关键字'function'而不是'()=>'可能导致输出未定义，因此最好使用关键字'function'

- soldour

Answer 6

移除内联事件处理程序，并完全采用非侵入式方式，例如：

​$('​​​​#race').bind('change', function(){
  var $this = $(this),
      id    = $this[0].id;

  if(/^other$/.test($(this).val())){
      $this.replaceWith($('<input/>', {
          type: 'text',
          name:  id,
          id: id
      }));
  }
});​​​

- jAndy

---

这样做会更加简洁易懂，容易维护。 - fantactuka

虽然这段代码可能更加“清晰易维护”，但它并没有以一种解释性的方式回答OP的问题。 - belugabob

“不显眼”的版本是否更清晰、更易维护，这取决于应用程序的规模和个人口味。作为一种方法，它有明显的缺点。例如，如果用户在文档加载完成之前从列表中进行选择，则事件处理程序将没有被不显眼地添加，并且不会被调用。 - Tim Down

@Tim Down：你不可能真的相信那个。如果你有这种担忧，只需将外部js代码加载到文档的head中即可。 - jAndy

@Tim Down：那么有什么“显著的缺点”呢？如果页面尚未完全加载，用户将能够与之交互（或者在一般情况下做任何事情）吗？ - jAndy

Answer 7

你期望 $(this) 指的是什么？

也许你是想用 sel.attr("id"); 吗？

- Daniel Earwicker

Answer 8

在函数上下文中，"this" 不是指向选择元素，而是指向页面本身。

• 将 var ID = $(this).attr("id"); 更改为 var ID = $(obj).attr("id");

如果 obj 已经是一个 jQuery 对象，则只需删除周围的 $()。

- Germán Rodríguez

Answer 9

我建议你阅读更多关于这个关键字的内容。

在这种情况下，你不能期望“this”选中“select”标记。

在这种情况下，你需要使用obj.id来获取选择标记的id。

- Hrishi

Answer 10

你可以做到

onchange='showHideOther.call(this);'

使用 <p> 标签代替

onchange='showHideOther(this);'

但是在函数中还需要将 obj 替换为 this。

- David Hellsing