jquery verstecken und an verschiedenen Orten zeigen

Question

Ich benutze jquery, um Text anzuzeigen, wenn auf eine Schaltfläche geklickt wird. Ich möchte auf der gleichen Seite an einer anderen Stelle mit einer anderen Schaltfläche, die einen anderen Text zeigt. Meine Lösung ist jetzt mehrere Skripte eine für jede div wie diese

<a class="pure-button pure-button-primary" type='button' id='hideshow1' value='hide/show1' >Show me1 ! </a> 
<div id='content1' style="display:none"> hide and show 1 </div> 

<script> 
jQuery(document).ready(function(){ 
     jQuery('#hideshow1').on('click', function(event) {   
      jQuery('#content1').toggle('hide'); 
     }); 
    }); 
</script> 

Und eine Kopie dieser alle, aber dann mit ‚hideshow2‘ und ‚content2‘

Jetzt brauche ich noch ein drittes hideshow3 zu schaffen, sondern Ich kann nicht herausfinden, wie man das mit nur einem Skript klüger macht.

Answer 1

Stattdessen mit Klassennamen arbeiten. Das wird Ihnen nicht Schmerz geben der gleiche Sache über das Schreiben und immer wieder:

jQuery(document).ready(function() { 
 
    jQuery('.hideshow').on('click', function(event) { 
 
    jQuery(this).next('.content').toggle('hide'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="pure-button pure-button-primary hideshow" type='button' value='hide/show1'>Show me1 ! </a> 
 
<div class='content' style="display:none">hide and show 1</div><br> 
 
<a class="pure-button pure-button-primary hideshow" type='button' value='hide/show1'>Show me2 ! </a> 
 
<div class='content' style="display:none">hide and show 2</div><br> 
 
<a class="pure-button pure-button-primary hideshow" type='button' value='hide/show1'>Show me3 ! </a> 
 
<div class='content' style="display:none">hide and show 3</div>

Answer 2

Verwendung jquery Text anzuzeigen, wenn eine Taste

geklickt wird Sie können sie verlinken mit data- Attribute. Auf diese Weise ist es egal, ob sich die Elemente nahe beieinander befinden und in Zukunft verschoben werden können, ohne dass das Skript neu geschrieben werden muss.

<a class='hideshow' data-hideshow="1">Show me 1!</a> 
<a class='hideshow' data-hideshow="2">Show me 2!</a> 

<div class='content' data-hideshow="1" style="display:none">hide and show 1 </div> 
<div class='content' data-hideshow="2" style="display:none">hide and show 2 </div> 

Dann wird Ihr Skript funktioniert auf Klassen und Attribute:.

$(".hideshow").click(function() { 
    var hideshow = $(this).data("hideshow"); 

    // Optional hide all other .content (not clear if this is required or not) 
    $(".content").hide(); 

    // Show the relevant .content 
    $(".content[data-hideshow=" + hideshow + "]").show(); 
}); 

Die .Hide()/show() Anrufe mit .not() und anderen Anrufen effizienter gemacht werden können durch die Kombination , aber das zeigt das Konzept.

Answer 3

in Verbindung type-Attribut und den Wert seiner schlechten ...

$(document).ready(function(){ 
 
     $('a[id^="hideshow"]').on('click', function(event) {   
 
      $(this).next().toggle('hide'); 
 
     }); 
 
    });

a{ display: block; cursor: pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="pure-button pure-button-primary" id='hideshow1'>Show me1 ! </a> 
 
<div id='content1' style="display:none"> hide and show 1 </div> 
 

 
<a class="pure-button pure-button-primary" id='hideshow2'>Show me2 ! </a> 
 
<div id='content2' style="display:none"> hide and show 2 </div> 
 

 
<a class="pure-button pure-button-primary" id='hideshow3'>Show me3 ! </a> 
 
<div id='content3' style="display:none"> hide and show 3 </div>

Answer 4

Ich glaube, Sie eine Struktur wie Taste div Taste div Taste div haben wollen. so verwenden diese

jsfiddle

JQ

jQuery(document).ready(function(){ 
    jQuery(".pure-button").on('click', function(event) {   
    var show = $(this).next("div") 
     $(show).toggle('hide'); 
    }); 
}); 

HTML:

<a class="pure-button pure-button-primary" type='button' id='hideshow1' value='hide/show1' >Show me1 ! </a> 
<div id='content1' style="display:none"> hide and show 1 </div> 
<a class="pure-button pure-button-primary" type='button' id='hideshow2' value='hide/show2' >Show me2 ! </a> 
<div id='content2' style="display:none"> hide and show 2 </div> 
<a class="pure-button pure-button-primary" type='button' id='hideshow3' value='hide/show3' >Show me3 ! </a> 
<div id='content3' style="display:none"> hide and show 3 </div> 
<a class="pure-button pure-button-primary" type='button' id='hideshow4' value='hide/show4' >Show me4 ! </a> 
<div id='content4' style="display:none"> hide and show 4 </div> 

OR wenn Ihr divs nicht direkt nach den Knöpfen Sie data-target wie so verwenden könnte : jsfiddle

HTML:

<a class="pure-button pure-button-primary" type='button' id='hideshow1' data-target="#content1" value='hide/show1' >Show me1 ! </a> 
<a class="pure-button pure-button-primary" type='button' id='hideshow2' data-target="#content2" value='hide/show2' >Show me2 ! </a> 
<a class="pure-button pure-button-primary" type='button' id='hideshow3' data-target="#content3" value='hide/show3' >Show me3 ! </a> 
<a class="pure-button pure-button-primary" type='button' id='hideshow4' data-target="#content4" value='hide/show4' >Show me4 ! </a> 

<div id='content1' style="display:none"> hide and show 1 </div> 
<div id='content2' style="display:none"> hide and show 2 </div> 
<div id='content3' style="display:none"> hide and show 3 </div> 
<div id='content4' style="display:none"> hide and show 4 </div> 

JQ:

jQuery(document).ready(function(){ 
    jQuery(".pure-button").click(function() {   
    var show = $(this).data("target") 
     $(show).toggle('hide'); 
    }); 
}); 

Answer 5

Warum Klassen hinzufügen Elemente auswählen? Es ist viel einfacher, die jQuery-Selektoren auf die richtige Weise zu verwenden.

Ein anderer Ansatz, können die "#contentx" Element unter Berücksichtigung ist nicht aufeinander folgend sein:

$(function() { 
 
    // get all elements with the id starting with hideshow 
 
    $('[id^="hideshow"]').on('click', function(event) { 
 
    // find all content elements ending with the same 
 
    // substring of the clicked element 
 
    $('#content' + this.id.substr(8)).toggle('hide'); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<a class="pure-button pure-button-primary" type='button' id='hideshow1' value='hide/show1' >Show me1 ! </a> 
 
<div id='content1' style="display:none"> hide and show 1 </div> 
 

 
<a class="pure-button pure-button-primary" type='button' id='hideshow2' value='hide/show1' >Show me1 ! </a> 
 
<div id='content2' style="display:none"> hide and show 1 </div> 
 

 
<a class="pure-button pure-button-primary" type='button' id='hideshow3' value='hide/show1' >Show me1 ! </a> 
 
<div id='content3' style="display:none"> hide and show 1 </div>

Answer 6

$(document).ready(function() { 
    $('.pure-button').on('click', function(event) { 
    var id = $(this).attr('id'); 
    id = id.substring(8); 
    $('#content' + id).toggle('hide'); 
    }); 
}); 

ich, dass Code denken Sie helfen wird, wenn die Schaltfläche geklickt und Display Box haben die gleiche Ziffer