.click jquery函數在使用後停止工作

我碰到了一個與我的.click jquery函數有關的問題。我想要發生的事情：當我按下按鈕時，一個div應該顯示：無，另一個應該顯示：block。這是我第一次按下按鈕，但之後沒有任何反應。.click jquery函數在使用後停止工作

下面是一些代碼：

$(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>

提前感謝！

來源

2017-05-28 beckman

我能看到的唯一的事情就是你在同一頁面上爲多個不同的對象使用相同的id標籤。如果你在多個地方使用它，請使用一堂課！你永遠不應該有多個相同的ID，因爲你將面臨很多重複問題...

來源

2017-05-28 17:35:01

哦，好吧。將ID更改爲類，問題得到解決。這是我有時要解決的問題，不知道它可能會導致這樣的問題。感謝您的幫助，將來會記住這個未來氣味;） – beckman

真棒，很高興我可以幫助！ –

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

來源

2017-05-28 18:30:04

.click jquery函數在使用後停止工作

回答

相關問題