.click jquery Funktion funktioniert nicht mehr nach einer Verwendung

Question

Ich stieß auf ein Problem mit meiner .click jquery Funktion. Was ich will: Wenn ich den Knopf drücke, sollte ein div angezeigt werden: keiner, und ein anderer soll anzeigen: block. Dies funktioniert beim ersten Drücken des Knopfes, aber danach passiert nichts. Hier

ist ein Code:

$(document).ready(function(){ 
 
    $("#0").click(function(){ 
 
     $("#product_container2").css("display", "none"); 
 
     $("#product_container3").css("display", "none"); 
 
     $("#product_container1").css("display", "block"); 
 
    }); 
 
    $("#1").click(function() { 
 
     $("#product_container1").css("display", "none"); 
 
     $("#product_container3").css("display", "none"); 
 
     $("#product_container2").css("display", "block"); 
 
    }); 
 
    $("#2").click(function(){ 
 
     $("#product_container1").css("display", "none"); 
 
     $("#product_container2").css("display", "none"); 
 
     $("#product_container3").css("display", "block"); 
 
    }); 
 
});

<section id="product_container1" class="col-12 product_container"> 
 
\t <h1 id="product-h1"> Produkter </h1> 
 
\t <hr style="width:90%; margin-left:5%"> 
 
\t <div class="product_info_container productx"> 
 
\t \t <img src="bilder/dumleOriginal220.png" alt="Dumle" id="product1" class="product"></img> 
 
\t \t <h2> Dumle Original 220 g</h2> 
 
\t \t \t <p> Dumle brings out the twinkle in your eyes. The goofy sweet is a combination of soft chewy toffee and smooth Fazer Chocolate. The... </p> 
 
\t \t \t 
 
\t \t <div id="button"> <b> Visa produkt information </b> </div> 
 

 
\t <hr style="width:80%; margin-left:5%; margin-top:10px;"> 
 
\t </div> 
 
    <div id="buttons"> 
 
    <a href="#product_container1" id="0" class="mybutton myred">1</a> 
 
    <a href="#product_container2" id="1" class="mybutton myblue">2</a> 
 
    <a href="#" id="2" class="mybutton myblue">3</a> 
 
</div> 
 
</section> 
 

 
<section id="product_container2" class="col-12 product_container"> 
 
\t <h1 id="product-h1"> Produkter </h1> 
 
\t <hr style="width:90%; margin-left:5%"> 
 
\t <div class="product_info_container productx"> 
 
\t \t <img src="bilder/dumleOriginal220.png" alt="Dumle" id="product1" class="product"></img> 
 
\t \t <h2> Dumle Original 220 g</h2> 
 
\t \t \t <p> Dumle brings out the twinkle in your eyes. The goofy sweet is a combination of soft chewy toffee and smooth Fazer Chocolate. The... </p> 
 
\t \t \t 
 
\t \t <div id="button"> <b> Visa produkt information </b> </div> 
 

 
\t <hr style="width:80%; margin-left:5%; margin-top:10px;"> 
 
\t </div> 
 
    <div id="buttons"> 
 
    <a href="#product_container1" id="0" class="mybutton myred">1</a> 
 
    <a href="#product_container2" id="1" class="mybutton myblue">2</a> 
 
    <a href="#" id="2" class="mybutton myblue">3</a> 
 
</div> 
 
</section> 
 

 
<section id="product_container3" class="col-12 product_container"> 
 
\t <h1 id="product-h1"> Produkter </h1> 
 
\t <hr style="width:90%; margin-left:5%"> 
 
\t <div class="product_info_container productx"> 
 
\t \t <img src="bilder/dumleOriginal220.png" alt="Dumle" id="product1" class="product"></img> 
 
\t \t <h2> Dumle Original 220 g</h2> 
 
\t \t \t <p> Dumle brings out the twinkle in your eyes. The goofy sweet is a combination of soft chewy toffee and smooth Fazer Chocolate. The... </p> 
 
\t \t \t 
 
\t \t <div id="button"> <b> Visa produkt information </b> </div> 
 

 
\t <hr style="width:80%; margin-left:5%; margin-top:10px;"> 
 
\t </div> 
 
    <div id="buttons"> 
 
    <a href="#product_container1" id="0" class="mybutton myred">1</a> 
 
    <a href="#product_container2" id="1" class="mybutton myblue">2</a> 
 
    <a href="#" id="2" class="mybutton myblue">3</a> 
 
</div> 
 
</section>

Vielen Dank im Voraus!

Answer 1

Das einzige, was ich sehen kann, ist, dass Sie die gleichen ID-Tags für mehrere verschiedene Objekte auf der gleichen Seite verwenden. Wenn Sie es an mehreren Stellen verwenden, verwenden Sie eine Klasse! Sie sollten sich nicht mehr als eine der gleichen ID haben, weil Sie eine Menge von sich wiederholenden Probleme ...

Answer 2

<section id="product_container1" class="col-12 product_container"> 
<h1 id="product-h1"> Produkter 1</h1> 
<hr style="width:90%; margin-left:5%"> 
<div class="product_info_container productx"> 
    <img src="bilder/dumleOriginal220.png" alt="Dumle" id="product1" class="product"> 
<h2> Dumle Original 220 g</h2> 
     <p> Dumle brings out the twinkle in your eyes. The goofy sweet is a combination of soft chewy toffee and smooth Fazer Chocolate. The... </p> 

    <div id="button"> <b> Visa produkt information </b> </div> 

<hr style="width:80%; margin-left:5%; margin-top:10px;"> 
</div> 
</section> 

<section id="product_container2" class="col-12 product_container"> 
<h1 id="product-h1"> Produkter 2</h1> 
<hr style="width:90%; margin-left:5%"> 
<div class="product_info_container productx"> 
    <img src="bilder/dumleOriginal220.png" alt="Dumle" id="product1" class="product"> 
    <h2> Dumle Original 220 g</h2> 
     <p> Dumle brings out the twinkle in your eyes. The goofy sweet is a combination of   soft chewy toffee and smooth Fazer Chocolate. The... </p> 

    <div id="button"> <b> Visa produkt information </b> </div> 

<hr style="width:80%; margin-left:5%; margin-top:10px;"> 
</div> 
</section> 

<section id="product_contai`enter code here`ner3" class="col-12 product_container"> 
<h1 id="product-h1"> Produkter 3</h1> 
<hr style="width:90%; margin-left:5%"> 
<div class="product_info_container productx"> 
    <img src="bilder/dumleOriginal220.png" alt="Dumle" id="product1" class="product"> 
    <h2> Dumle Original 220 g</h2> 
     <p> Dumle brings out the twinkle in your eyes. The goofy sweet is a combination of    soft chewy toffee and smooth Fazer Chocolate. The... </p> 

    <div id="button"> <b> Visa produkt information </b> </div> 

<hr style="width:80%; margin-left:5%; margin-top:10px;"> 
</div> 

</section> 
<div id="buttons"> 
    <a href="#product_container1" id="0" class="mybutton myred">1</a> 
    <a href="#product_container2" id="1" class="mybutton myblue">2</a> 
    <a href="#" id="2" class="mybutton myblue">3</a> 
</div> 
<script> 
$(document).ready(function(){ 
$("#0").click(function(){ 
    $("#product_container2").css("display", "none"); 
    $("#product_container3").css("display", "none"); 
    $("#product_container1").css("display", "block"); 
}); 
$("#1").click(function() { 
    $("#product_container1").css("display", "none"); 
    $("#product_container3").css("display", "none"); 
    $("#product_container2").css("display", "block"); 
}); 
$("#2").click(function(){ 
    $("#product_container1").css("display", "none"); 
    $("#product_container2").css("display", "none"); 
    $("#product_container3").css("display", "block"); 
}); 
}); 

</script>