$ (этот) .attr (“идентификатор”), не работающий
как в заголовке говорится, я продолжаю становиться "неопределенным", когда я пытаюсь получить идентификационный атрибут элемента, в основном что я хочу сделать, заменить элемент полем ввода, когда значение - "другой".
Вот код:
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>
Это - вероятно, что-то маленькое, которое я не замечаю, что я делаю неправильно?
9 ответов
Из-за способа вызова функции (т. Е. Как простой вызов переменной функции), this является глобальным объектом (для которого окно ] - это псевдоним в браузерах). Вместо этого используйте параметр obj .
Кроме того, создание объекта jQuery и использование его метода attr () для получения идентификатора элемента неэффективно и ненужно. Просто используйте свойство элемента 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'});
}
}
Вы также можете написать всю свою функцию как расширение jQuery, чтобы вы могли делать что-то вроде `$ ('# element'). showHideOther ();
(function($) {
$.extend($.fn, {
showHideOther: function() {
$.each(this, function() {
var Id = $(this).attr('id');
alert(Id);
...
return this;
});
}
});
})(jQuery);
Не то чтобы это отвечало на ваш вопрос ... Просто пища для размышлений.
Что вы ожидаете от $ (this) ?
Вы имеете в виду sel.attr ("id"); возможно ?
Удалите встроенный обработчик событий и сделайте его полностью ненавязчивым, например
$('#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
}));
}
});
Вы можете сделать
onchange = 'showHideOther.call (this);'
вместо
onchange = 'showHideOther (this);'
Но тогда вы также необходимо заменить obj на this в функции.
Измените
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();
}
});
Я рекомендую вам прочитать больше о этом ключевом слове.
Вы не можете ожидать, что "this" выберет тег "select" в этом случае.
Что вы хотите сделать в этом случае, так это использовать obj.id для получения id тега select.
вы используете this в функции, когда вы должны использовать параметр.
Вы используете только $ (this) в обратных вызовах ... из таких выборок, как
$('a').click(function() {
alert($(this).href);
})
В заключение, правильным способом (используя ваш пример кода) было бы сделать это
obj.attr ('id');
В контексте функции "this" это относится не к элементу select, а к самой странице
- Изменить
var ID = $ (this) .attr ("id") ;tovar ID = $ (obj) .attr ("id");
Если obj уже является объектом jQuery, просто удалите $ () вокруг него.