jQuery $ (this) .attr ("id") funktioniert nicht

Question

Wie der Titel sagt, bekomme ich "undefined", wenn ich versuche, das ID-Attribut eines Elements zu bekommen, im Grunde, was ich tun möchte, ist ein Element zu ersetzen mit einem Eingabefeld, wenn der Wert "Other" ist. Hier

ist der Code:

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

Die 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> 

Es ist wahrscheinlich etwas klein, dass ich nicht zu bemerken, was mache ich falsch?

Vielen Dank im Voraus!

Answer 1

Aufgrund der Art, wie die Funktion aufgerufen wird (d. H. Als einfacher Aufruf einer Funktionsvariablen), ist this das globale Objekt (für das window ein Alias ​​in Browsern ist). Verwenden Sie stattdessen den Parameter obj.

Außerdem ist das Erstellen eines jQuery-Objekts und die Verwendung der attr()-Methode zum Abrufen einer Element-ID ineffizient und unnötig. Verwenden Sie einfach die Eigenschaft id des Elements, die in allen Browsern funktioniert.

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

Was erwarten Sie von $(this)?

Meinst du vielleicht sel.attr("id"); vielleicht?

Answer 3

Im Funktionskontext "this" seine nicht auf das select-Element bezieht, sondern auf die Seite selbst

• ändern var ID = $(this).attr("id"); zu var ID = $(obj).attr("id");

Wenn obj ist bereits ein jQuery-Objekt, entfernen Sie einfach die $() um ihn herum.

Answer 4

Ihre Verwendung this in einer Funktion, wenn Sie den Parameter verwenden sollten.

Sie nur $ (this) in Rückrufe verwenden ... von Auswahlen wie

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

Abschließend die richtige Art und Weise (Code am Beispiel) wäre dieses

obj.attr('id');

zu tun

Answer 5

ändern

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

zu

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

Auch können Sie es ändern jQuery Event-Handler zu verwenden:

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

die inline event handler entfernen und tun es völlig unauffällig, wie

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

empfehle ich Ihnen mehr über die this keyword zu lesen .

Sie können nicht erwarten, dass "this" in diesem Fall das "select" -Tag auswählt.

In diesem Fall möchten Sie obj.id verwenden, um die ID des ausgewählten Tags zu erhalten.

Answer 8

Sie könnten auch Ihre gesamte Funktion als jQuery-Erweiterung schreiben, also könnten Sie etwas in der Art von `$ ('# element') machen. ShowHideOther();

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

       ... 

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

Nicht dass es Ihre Frage beantwortet ... nur Denkanstoß.

Answer 9

Sie können

onchange='showHideOther(this);'

Aber dann müssen Sie ersetzen auch obj mit this in der Funktion

onchange='showHideOther.call(this);'

statt

tun.