jQuery $ (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> 

Это, вероятно, что-то маленькое, что я не заметил,, что я делаю неправильно?

Thanx заранее!

Answer 1

Из-за способа вызова функции (т. Е. Как простого вызова функциональной переменной) this является глобальным объектом (для которого window является псевдонимом в браузерах). Вместо этого используйте параметр 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'}); 
    } 
} 

Answer 2

Что вы ожидаете от $(this)?

Возможно, вы имеете в виду sel.attr("id");?

Answer 3

В функции контексте «это» его виду не выбор элемента, а на страницу самого

• Изменение var ID = $(this).attr("id"); к var ID = $(obj).attr("id");

Если OBJ уже jQuery Object, просто удалите вокруг него $().

Answer 4

ваш использование this в функции, когда вы должны использовать параметр.

Вы только использовать $ (это) в функции обратного вызова ... от выборов, как

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

В заключение, надлежащим образом (используя ваш пример кода) будет делать это

obj.attr('id');

Answer 5

Изменение

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 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 keyword ,

Вы не можете ожидать «этого», чтобы выбрать тег «select» в этом случае.

Что вы хотите сделать в этом случае, это использовать obj.id, чтобы получить идентификатор тега select.

Answer 8

Вы также можете написать всю свою функцию как расширение jQuery, чтобы вы могли что-то делать по строкам `$ ('# element'). ShowHideOther();

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

       ... 

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

Не то, чтобы он отвечал на ваш вопрос ... Просто пища для размышлений.

Answer 9

Вы можете сделать

onchange='showHideOther.call(this);'

вместо

onchange='showHideOther(this);'

Но вы также должны заменить obj с this в функции.