Я столкнулся с проблемой с моей функцией .click jquery. Что я хочу, чтобы произошло: когда я нажимаю кнопку, один div должен отображаться: нет, а другой должен отображать: 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>

Заранее спасибо!

0
beckman 28 Май 2017 в 20:20

2 ответа

Лучший ответ

Единственное, что я вижу, это то, что вы используете одни и те же теги id для нескольких разных объектов на одной странице. Если вы используете его более чем в одном месте, используйте класс! У вас никогда не должно быть более одного идентичного идентификатора, потому что вы столкнетесь с множеством повторяющихся проблем ...

0
Jacob Belanger 28 Май 2017 в 17:35
<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>
0
Morteza Fathnia 28 Май 2017 в 18:30