在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-放在li元素的id的前面将提供类似于"#product-product-1"的内容，这与任何内容都不匹配。

即使我们确实纠正了这一点，你也不可能有同一个id的多个元素--没有区别于div#product-1的元素。id必须是唯一的；最好的情况下，您将选择li本身，因为它是第一次匹配。

相反，将一个data-...属性添加到li中，并使用它：

​

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

首先，将li id附加到product-中，这意味着您正在寻找不存在的名为product-product-1的元素。其次，id在li和相关的div元素上有重复的div属性，这是无效的。

更好的方法是使用单击li中的li查找相关的.description。试试这个：

​

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

​

更改描述div的id和用于隐藏div的选择器。