在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 {1}}。 id s 必须独一无二;最好的情况是，您选择li本身，因为它是第一场比赛。

而是向data-...添加li属性，并使用该属性：

＆＃13;

＆＃13;

$('.description').hide();

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

更好的方法是使用点击的index()中的li来查找相关的.description。试试这个：

＆＃13;

＆＃13;

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

＆＃13;

.description {
  display: none;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

＆＃13;

＆＃13;

$('.description').hide();

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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