jQuery zeigen div von id-Attribut

Question

ich zwei Eingänge

<div class="form-group"> 
    <label>Store Username <span>*</span></label> 
    <input required type="text" name="storeusername" class="form-control info" id="1" /> 
</div> 
<div class="form-group"> 
    <label>Store Name<span>*</span></label> 
    <input required type="text" name="storename" class="form-control info" id="2" /> 
</div> 

haben Was ich tue, ist, dass ich, wenn ich an einem Eingang klicken sollte zunächst alle divs verstecken und dann id dieser Eingabe auswählen und zeigen ihre jeweiligen div ...

divs sind diese

<div id="div1" class="infoDiv hidden"> 
    <div class="company-story-content"><h2 class="story-title">Store <span class="color-text">Username</span></h2></div> 
    <p>Store username is unique and it will be used to find your store.</p> 
    <p>For example www.flashcart.com/<span class="color-text">abc</span> to find store that has <span class="color-text">abc</span> username.</p> 
    <p>Please keep in mind before choosing username.</p> 
    <p> 
    <ul> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;Username can contain <span class="color-text">Alphabets</span><li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;Username can contain <span class="color-text">Numbers</span>.</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;Username can contain <span class="color-text">Underscores</span>.</li> 
    </ul> 
    </p> 
</div> 
<div id="div2" class="infoDiv hidden"> 
    <div class="company-story-content"><h2 class="story-title">Some other<span class="color-text">Username</span> </h2></div> 
    <p>Div</p> 
</div> 

jquery

$(document).ready(function() { 
    $(".info").click(function() { 
    var id = $(".info").attr('id'); 
    $(".infoDiv").hide(); 
    $("#div"+id).removeClass("hidden"); 
    }); 
}); 

Aber das funktioniert nicht! Kein div wird angezeigt. Kann mir jemand mit ein bisschen Erklärung helfen?

Answer 1

Ich sehe Ihre Absicht, ein div zu bringen ist, wenn der Benutzer im Begriff ist, Wert in das Textfeld einzugeben.

Da Benutzer auch in die Textbox mit Tastatur navigieren können, würde ich empfehlen, Fokus Ereignis zu verwenden, um die Logik des Bringens der div eher als click auszulösen.

$(".info").on('focus',function() 
{ 
    $(".infoDiv").hide(); 
    var id = $(this).attr('id'); 
    $("#div"+id).show(); 
}); 

Answer 2

Ich bin nicht sicher, was Ihre ‚versteckten‘ Klassen aussehen, so habe ich Inline-Styles, die divs zu verstecken und dann jquery zeigen/verstecken ähnlich, wie Sie es bereits tun. Siehe Geige.

https://jsfiddle.net/jkkr7efh/

HTML:

<div class="form-group"> 
    <label>Store Username <span>*</span></label> 
    <input required type="text" name="storeusername" class="form-control info" id="1" /> 
</div> 
<div class="form-group"> 
    <label>Store Name<span>*</span></label> 
    <input required type="text" name="storename" class="form-control info" id="2" /> 
</div> 

<div id="div1" class="infoDiv" style="display:none;"> 
    <div class="company-story-content"><h2 class="story-title">Store <span class="color-text">Username</span> </h2></div> 
    <p>Store username is unique and it will be used to find your store.</p> 
    <p>For example www.flashcart.com/<span class="color-text">abc</span> to find store that has <span class="color-text">abc</span> username.</p> 
    <p>Please keep in mind before choosing username.</p> 
    <ul> 
    <li>&nbsp;&nbsp;&nbsp;&nbsp;Username can contain <span class="color-text">Alphabets</span><li> 
    <li>&nbsp;&nbsp;&nbsp;&nbsp;Username can contain <span class="color-text">Numbers</span>.</li> 
    <li>&nbsp;&nbsp;&nbsp;&nbsp;Username can contain <span class="color-text">Underscores</span>.</li> 
    </ul> 
</div> 

<div id="div2" class="infoDiv" style="display:none;"> 
    <div class="company-story-content"> 
    <h2 class="story-title">Some other<span class="color-text">Username</span> </h2></div> 
    <p>Div</p> 
</div> 

Javascript:

$(document).ready(function() 
     { 
     $(".info").click(function(event) 
     { 
      $(".infoDiv").hide(); 
      var id = $(event.target).attr('id'); 
      $("#div"+id).show(); 
     }); 
     }); 

Answer 3

.Hide() und .show() sind verschiedene Mechanismen von Atomen oder eine "versteckte" Klasse zu entfernen. Versuchen Sie, Ihre letzte Zeile zu ändern: $ ("# div" + id) .removeClass ("hidden"). Show();

Answer 4

die jQuery .Hide() -Funktion ist nicht gleich die versteckte Klasse wie das Hinzufügen der divs zu verstecken, so dass Ihre versteckten Klasse gehen sie zu entfernen ist nicht zu zeigen. Sie können die Klasse ein- und ausblenden, indem Sie die Klasse hinzufügen oder entfernen, oder indem Sie die Funktionen jQuery .hide() und .show() verwenden. Mischen Sie nicht die Methoden oder es wird Ihnen Ärger machen.