Question

正如标题所说，当我尝试获取元素的id属性时，我一直得到“未定义”，基本上我想要做的是当值为“other”时用输入框替换元素。

以下是代码：

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>

我可能没注意到这一点，我做错了什么？

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();
    }
});

Answer 2

当你应该使用参数时，你在函数中使用this。

你只能在回调中使用$（this）......来自

之类的选择

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

最后，正确的方法（使用你的代码示例）就是这样做

obj.attr('id');

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'});
    }
}

Answer 4

您也可以将整个函数编写为jQuery扩展，因此您可以按照$（'＃element'）的方式执行某些操作.showHideOther（）;

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

                ...

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

不是它回答了你的问题......只是值得深思。

Answer 5

您希望$(this)提到什么？

你的意思是sel.attr("id");吗？

Answer 6

删除inline event handler并完全不引人注意，例如

$('#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
      }));
  }
});

Answer 7

在函数上下文“this”中它不是指select元素，而是指页面本身

更改var ID = $(this).attr("id"); 到var ID = $(obj).attr("id");

如果 obj 已经是jQuery对象，只需删除它周围的$（）。

Answer 8

我建议您详细了解this keyword。

在这种情况下，您不能指望“this”选择“select”标签。

在这种情况下，您要使用obj.id来获取select标记的ID。

Answer 9

你可以做到

onchange='showHideOther.call(this);'

而不是

onchange='showHideOther(this);'

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

$（this）.attr（“id”）不起作用

9 个答案: