显示特定 <div> 在click（）上

Question

I have this code

 $('.description').hide(); $('li').click(function() { var id = $(this).attr("id"); $('#product-' + id).show(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li id="product-1">Product 1</li> <li id="product-2">Product 2</li> <li id="product-3">Product 3</li> <li id="product-4">Product 4</li> </ul> <div class="description-container"> <div class="description" id="product-1"> <h2>Product 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde est necessitatibus illo ducimus impedit debitis facere amet, distinctio explicabo ab, qui modi molestias molestiae incidunt omnis. Quisquam, labore vero amet.</p> </div> <div class="description" id="product-2"> <h2>Product 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio similique, explicabo voluptatibus. Id sit deserunt impedit, incidunt consequuntur quam quae, dolor non quaerat rem debitis vitae error ipsa quo dignissimos!</p> </div> <div class="description" id="product-3"> <h2>Product 3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi distinctio molestias culpa enim architecto optio ratione, saepe, ullam libero. Mollitia quis, ipsum similique in inventore aut officia optio quam odio?</p> </div> <div class="description" id="product-4"> <h2>Product 4</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est distinctio nam minus unde provident, fugit doloremque minima rerum ullam nemo, rem culpa ipsa fugiat quas. Officiis error animi omnis sunt.</p> </div> </div> 

What I want is when I click on li#product-1 , .description-container #product-1 appears.

Same thing if I click on li#product-2 , etc.

I try something in jQuery but it does not work.

Answer 1

First, prepending #product- to the the id s of your li elements will give something like "#product-product-1" , which won't match anything.

Even if we did correct that, you can't have multiple elements with the same id -- there's no differentiation li#product-1 from div#product-1 . id s must be unique; best-case, you'll select the li itself since it's the first match.

Instead, add a data-... attribute to the li s, and use that:

 $('.description').hide(); $('li').click(function() { var id = $(this).data("target"); $('#product-' + id).show(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li data-target="1">Product 1</li> <li data-target="2">Product 2</li> <li data-target="3">Product 3</li> <li data-target="4">Product 4</li> </ul> <div class="description-container"> <div class="description" id="product-1"> <h2>Product 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde est necessitatibus illo ducimus impedit debitis facere amet, distinctio explicabo ab, qui modi molestias molestiae incidunt omnis. Quisquam, labore vero amet.</p> </div> <div class="description" id="product-2"> <h2>Product 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio similique, explicabo voluptatibus. Id sit deserunt impedit, incidunt consequuntur quam quae, dolor non quaerat rem debitis vitae error ipsa quo dignissimos!</p> </div> <div class="description" id="product-3"> <h2>Product 3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi distinctio molestias culpa enim architecto optio ratione, saepe, ullam libero. Mollitia quis, ipsum similique in inventore aut officia optio quam odio?</p> </div> <div class="description" id="product-4"> <h2>Product 4</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est distinctio nam minus unde provident, fugit doloremque minima rerum ullam nemo, rem culpa ipsa fugiat quas. Officiis error animi omnis sunt.</p> </div> </div> 

Answer 2

Firstly you are appending the li id to product- which means you're looking for elements called product-product-1 , which don't exist. Secondly your HTML has duplicate id attributes on the li and the related div elements which is invalid.

A better approach would be to use the index() from the clicked li to find the related .description . Try this:

 $('li').click(function() { $('.description').hide().eq($(this).index()).show(); }); 

 .description { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li>Product 1</li> <li>Product 2</li> <li>Product 3</li> <li>Product 4</li> </ul> <div class="description-container"> <div class="description"> <h2>Product 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde est necessitatibus illo ducimus impedit debitis facere amet, distinctio explicabo ab, qui modi molestias molestiae incidunt omnis. Quisquam, labore vero amet.</p> </div> <div class="description"> <h2>Product 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio similique, explicabo voluptatibus. Id sit deserunt impedit, incidunt consequuntur quam quae, dolor non quaerat rem debitis vitae error ipsa quo dignissimos!</p> </div> <div class="description"> <h2>Product 3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi distinctio molestias culpa enim architecto optio ratione, saepe, ullam libero. Mollitia quis, ipsum similique in inventore aut officia optio quam odio?</p> </div> <div class="description"> <h2>Product 4</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est distinctio nam minus unde provident, fugit doloremque minima rerum ullam nemo, rem culpa ipsa fugiat quas. Officiis error animi omnis sunt.</p> </div> </div> 

Answer 3

 $('.description').hide(); $('li').click(function() { var id = $(this).attr("id"); $('#div-'+id).show(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li id="product-1">Product 1</li> <li id="product-2">Product 2</li> <li id="product-3">Product 3</li> <li id="product-4">Product 4</li> </ul> <div class="description-container"> <div class="description" id="div-product-1"> <h2>Product 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde est necessitatibus illo ducimus impedit debitis facere amet, distinctio explicabo ab, qui modi molestias molestiae incidunt omnis. Quisquam, labore vero amet.</p> </div> <div class="description" id="div-product-2"> <h2>Product 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio similique, explicabo voluptatibus. Id sit deserunt impedit, incidunt consequuntur quam quae, dolor non quaerat rem debitis vitae error ipsa quo dignissimos!</p> </div> <div class="description" id="div-product-3"> <h2>Product 3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi distinctio molestias culpa enim architecto optio ratione, saepe, ullam libero. Mollitia quis, ipsum similique in inventore aut officia optio quam odio?</p> </div> <div class="description" id="div-product-4"> <h2>Product 4</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est distinctio nam minus unde provident, fugit doloremque minima rerum ullam nemo, rem culpa ipsa fugiat quas. Officiis error animi omnis sunt.</p> </div> </div> 

Change the id of the description div and the selector for hiding the div.