jQuery $ (this) .attr ("id") nie działa

Question

, jak mówi tytuł, wciąż uzyskuję "nieokreślony", gdy próbuję uzyskać atrybut id elementu, w zasadzie to, co chcę zrobić, to zastąpić element z polem wprowadzania danych, gdy wartość jest "inna".

Oto kod:

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> 

Prawdopodobnie jest to coś małego, że nie jestem widząc, co robię źle?

Thanx z góry!

Answer 1

Ze względu na sposób wywoływania funkcji (tj. Jako proste wywołanie zmiennej funkcji), this jest obiektem globalnym (dla którego window jest aliasem w przeglądarkach). Zamiast tego należy użyć parametru obj.

Tworzenie obiektu jQuery i używanie jego metody attr() do uzyskania identyfikatora elementu jest nieefektywne i niepotrzebne. Po prostu użyj właściwości elementu id, która działa we wszystkich przeglądarkach.

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

Czego oczekujesz od $(this)?

Czy masz na myśli sel.attr("id");?

Answer 3

W kontekście funkcji "to" jej nie odwołując się do wybranych elementów, ale do strony sama

• Zmień var ID = $(this).attr("id"); do var ID = $(obj).attr("id");

Jeśli obj jest już Obiekt jQuery, po prostu usuń wokół niego $().

Answer 4

Twoje użycie this w funkcji, gdy powinieneś używać tego parametru.

Wystarczy tylko użyć $ (this) w wywołania zwrotne ... z wyboru jak

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

Na zakończenie, w odpowiedni sposób (wykorzystuje przykład kodu) byłoby to zrobić

obj.attr('id');

Answer 5

Zmień

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

do

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

Ponadto można zmienić go używać jQuery obsługi zdarzenia:

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

Zdjąć inline event handler i zrobić to całkowicie dyskretny, jak

​$('​​​​#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

Polecam przeczytać więcej o this keyword .

Nie możesz oczekiwać "this", aby w tym przypadku wybrać znacznik "select".

W tym przypadku należy użyć obj.id, aby uzyskać identyfikator znacznika select.

Answer 8

Można również napisać całą swoją funkcję jako rozszerzenie jQuery, więc można zrobić coś wzdłuż linii `$ ('# element'). ShowHideOther();

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

       ... 

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

Nie to, że odpowiada na twoje pytanie ... Po prostu jedzenie do przemyślenia.

Answer 9

Można zrobić

onchange='showHideOther.call(this);'

zamiast

onchange='showHideOther(this);'

Ale wtedy trzeba także wymienić obj z this w funkcji.