jQuery $ (this) .attr ("id") ne fonctionne pas

Question

Comme le dit le titre, je continue d'être "indéfini" lorsque j'essaie d'obtenir l'attribut id d'un élément, ce que je veux faire est de remplacer un élément avec une zone de saisie lorsque la valeur est "autre".

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

Le code 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> 

Il est probablement quelque chose de petit que je ne remarquais, ce que je fais mal?

Merci d'avance!

Answer 1

En raison de la façon dont la fonction est appelée (c'est-à-dire comme un simple appel à une variable de fonction), this est l'objet global (pour lequel window est un alias dans les navigateurs). Utilisez plutôt le paramètre obj.

De même, créer un objet jQuery et utiliser sa méthode attr() pour obtenir un ID d'élément est inefficace et inutile. Utilisez simplement la propriété id de l'élément, qui fonctionne dans tous les navigateurs.

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

Qu'attendez-vous de $(this)?

Voulez-vous dire sel.attr("id"); peut-être?

Answer 3

Dans le contexte de la fonction "ce" son ne se réfère pas à l'élément de sélection, mais la page elle-même

• changement var ID = $(this).attr("id"); à var ID = $(obj).attr("id");

Si obj est déjà Objet jQuery, supprimez simplement $() autour de lui.

Answer 4

en utilisant this dans une fonction, lorsque vous devriez utiliser le paramètre.

Vous utilisez seulement $ (this) à callbacks ... à partir de sélections comme

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

En guise de conclusion, la bonne façon (en utilisant votre exemple de code) serait de faire

obj.attr('id');

Answer 5

changement

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

à

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

vous pouvez également changer pour utiliser gestionnaire d'événements 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

Retirez le inline event handler et le faire complètement discret, comme

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

Je vous recommande de lire plus sur le this keyword .

Vous ne pouvez pas vous attendre à ce que "this" sélectionne l'étiquette "select" dans ce cas.

Ce que vous voulez faire dans ce cas est d'utiliser obj.id pour obtenir l'identifiant de l'étiquette de sélection.

Answer 8

Vous pouvez également écrire votre fonction entière en tant qu'extension jQuery, donc vous pouvez faire quelque chose comme `$ ('# element'). ShowHideOther();

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

       ... 

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

Pas que cela répond à votre question ... Juste matière à réflexion.

Answer 9

Vous pouvez faire

onchange='showHideOther.call(this);'

au lieu de

onchange='showHideOther(this);'

Mais vous devez également remplacer obj avec this dans la fonction.