javascript - 在 click() 上显示特定的 <div>

Question

我有这个代码

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

我想要的是当我点击 li#product-1 时，出现 .description-container #product-1。

如果我点击 li#product-2 等也是一样

我在 jQuery 中尝试了一些东西，但它不起作用。

Answer 1

首先，前置#product-到id你的li元素会给出类似 "#product-product-1" 的东西，它不会匹配任何东西。

即使我们确实纠正了这一点，您也不能让多个元素具有相同的id。 -- 没有区别 li#product-1来自 div#product-1 . id s 必须是唯一的；最好的情况下，您将选择 li本身，因为它是第一场比赛。

相反，添加一个 data-...属性为 li s，并使用它:

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