$(.attr).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>

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

Answer 1

由于调用函数的方式(即，作为对函数变量的简单调用)，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 2

变化

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 3

在应该使用参数的时候，在函数中使用this。

您仅在回调中使用$(this) ...从像这样的选择

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

最后，正确的方法(使用您的代码示例)应该是这样做的

obj.attr('id');