.attr() als eine Variable in Attributselektor nicht

Question

arbeiten

Ich habe Code wie dieses

<div class="field"> 
    <label>Title</label> 
    <input id="post-titie" type="text"> 
</div> 
<div class="ui olive message" for-field="post-title" hidden> 
    <div class="header">About Title</div> 
    <ul class="list"> 
     <li>Visitors can see your title even if they're not logged in.</li> 
     <li>The title is public.</li> 
    </ul> 
</div> 

$('.form textarea, :input').focus(function(){ 

    var forwhom = $(this).attr('id'); /* not working */ 
    /* var forwhom = 'post-title'; works */ 

    var _msg = $(this).parents().eq(2).find('div[for-field="'+forwhom+'"]'); 
    $(_msg).transition('fade down').transition('show'); 

    console.log(forwhom); 
    console.log(_msg); 
} 

Was ich tun möchte, ist, wenn <input> oder <textarea> fokussiert, zeigen Meldungen div mit .message Klasse.

Ich mache $(this).attr('id') als Variable (zB post-title), und finde es mit .find('div[for-field="'+forwhom+'"]'). Das funktioniert nicht.

Aber wenn ich var forwhom von $(this).attr('id') (jQ Selektor) zu einem absoluten Wert wie post-title ersetzen, funktioniert es.

Es ist seltsam! Laut der jQuery-Dokumentation gibt die .attr()-Methode eine Zeichenfolge und kein Objekt zurück.

Was ist das Problem?

Answer 1

Div Attribut for-field="post-title" und input hat post-titie ist es spelling mistake.

post-title und post-titie sind nicht gleich das ist der Grund, warum Ihr Code das Div mit Attribut nicht findet.

Answer 2

Ich bekomme ID-Attribut. Überprüfen Sie für die Konsolenfehler:

$(function(){ 
    $('.form textarea, :input').focus(function(){ 

    var forwhom = $(this).attr('id'); /* working */ 
    /* var forwhom = 'post-title'; works */ 

    console.log(forwhom); 
}); 

}); 

Hier ist die Arbeits Geige https://jsfiddle.net/sesn/x1ju006b/1/

Answer 3

einige Tipps:

1) verwenden Chrom dev Tools, um Ihren Selektoren in der Konsole zu testen

2) Verwenden Sie .prop() anstelle von .attr()

3) .closest() ins tead