.click jquery 功能在使用一次后停止工作
.click jquery function stops working after one use
我的 .click jquery 函数遇到了问题。我想要发生的事情：当我按下按钮时，一个 div 应该 display:none，另一个应该 display:block。这在我第一次按下按钮时有效，但之后什么也没有发生。
这是一些代码：
$(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">
<h1 id="product-h1"> Produkter </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"></img>
<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>
<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">
<h1 id="product-h1"> Produkter </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"></img>
<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>
<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">
<h1 id="product-h1"> Produkter </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"></img>
<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>
<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>
提前致谢！
我唯一能看到的是您对同一页面上的多个不同对象使用了相同的 ID 标签。如果您在多个地方使用它，请使用 class！你不应该拥有超过一个相同的 id，因为你将面临很多重复的问题...
<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>
我的 .click jquery 函数遇到了问题。我想要发生的事情：当我按下按钮时，一个 div 应该 display:none，另一个应该 display:block。这在我第一次按下按钮时有效，但之后什么也没有发生。
这是一些代码：
$(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">
<h1 id="product-h1"> Produkter </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"></img>
<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>
<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">
<h1 id="product-h1"> Produkter </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"></img>
<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>
<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">
<h1 id="product-h1"> Produkter </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"></img>
<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>
<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>
提前致谢！
我唯一能看到的是您对同一页面上的多个不同对象使用了相同的 ID 标签。如果您在多个地方使用它，请使用 class！你不应该拥有超过一个相同的 id，因为你将面临很多重复的问题...
<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>