如何使用相同的jQuery函数选择不同的div？

时间：2019-04-18 15:08:57

标签： jquery function bootstrap-4

我一直在尝试使div在单击div时显示更多信息，但是我也想对具有不同信息的不同div做同样的事情。 （如音乐唱片）。

当我单击div时，它可以正常工作，但是当我单击所有其他div时，它们都只从第一个div触发第一个jQuery函数，并显示与第一个div相同的信息。 我想这是因为它们的名字都相同。但是我想知道如何启动相同的功能，而又不改变太多内容或为每个div创建新功能？我想让我的代码尽量保持DRY。 

$(function() {
  $('#about-section').hide();
  $('.description').click(function() {
    $('#about-section') .toggle(1000);
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4">
  <div class="card mb-4 shadow-sm">
    <img class="card-img-top" src="images/album2.jpeg">
    <div class="content">
      <div class="description">
        The First Album[1989]
      </div>
    </div>
    <div id="about-section">
      <p id="p1"><img class="float-left" src="images/album2.jpeg" style="width: 500px; height:500px"></p>
      <p class="album">The First Album[1989]</p>
      <p>bands’ classic first record, produced by Mellisa Madrid with Floor, Jake Baker, Keifer Leblanch and Adrian Sherwood.</p>
      <div id="albumlist">
        <p>Tracklist </p>
        <ol class="albumlist">
          <li>Yes</li>
          <li>No</li>
          <li>Idk</li>
          <li>Can you repeat the question?</li>
        </ol>
      </div>
    </div>
  </div>
</div>
<div class="col-md-4">
  <div class="card mb-4 shadow-sm">
    <img class="card-img-top" src="images/album1.jpg">
  </div>
  <div class="content">
    <div class="description">
      The Second Album[1990]
    </div>
  </div>

</div>


<div class="col-md-4">
  <div class="card mb-5 mb-4 shadow-sm">
    <img class="card-img-top" src="images/town.jpg">
  </div>
  <div class="content">
    <div class="description">The Third Album[1990]</div>
  </div>
</div>

3 个答案:

答案 0 :(得分：0)

由于您的HTML似乎没有遵循某种模式，因此您始终可以使用数据属性，并在“关于部分”中添加一个类，以便它们被自动隐藏

$(function() {
  $('.about-data').hide();
  $('.description').click(function() {
    $('.about-data').hide();
    $($(this).data("target_selector")) .toggle(1000);
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4">
  <div class="card mb-4 shadow-sm">
    <img class="card-img-top" src="images/album2.jpeg">
    <div class="content">
      <div data-target_selector="#about-section" class="description">
        The First Album[1989]
      </div>
    </div>
    <div id="about-section" class="about-data">
      <p id="p1"><img class="float-left" src="images/album2.jpeg" style="width: 500px; height:500px"></p>
      <p class="album">The First Album[1989]</p>
      <p>bands’ classic first record, produced by Mellisa Madrid with Floor, Jake Baker, Keifer Leblanch and Adrian Sherwood.</p>
      <div id="albumlist">
        <p>Tracklist </p>
        <ol class="albumlist">
          <li>Yes</li>
          <li>No</li>
          <li>Idk</li>
          <li>Can you repeat the question?</li>
        </ol>
      </div>
    </div>
  </div>
</div>
<div class="col-md-4">
  <div class="card mb-4 shadow-sm">
    <img class="card-img-top" src="images/album1.jpg">
  </div>
  <div class="content">
    <div class="description">
      The Second Album[1990]
    </div>
  </div>

</div>


<div class="col-md-4">
  <div class="card mb-5 mb-4 shadow-sm">
    <img class="card-img-top" src="images/town.jpg">
  </div>
  <div class="content">
    <div class="description">The Third Album[1990]</div>
  </div>
</div>

答案 1 :(得分：0)

给你的次要班一个普通班。

<div class="card mb-4 shadow-sm">
  <img class="card-img-top" src="images/album2.jpeg">
  <div class="content">
    <div class="description">
      The First Album[1989]
    </div>
  </div>
  <div id="about-section" class="details">
    <p id="p1"><img class="float-left" src="images/album2.jpeg" style="width: 500px; height:500px"></p>
    <p class="album">The First Album[1989]</p>
    <p>bands’ classic first record, produced by Mellisa Madrid with Floor, Jake Baker, Keifer Leblanch and Adrian Sherwood.</p>
    <div id="albumlist">
      <p>Tracklist </p>
      <ol class="albumlist">
        <li>Yes</li>
        <li>No</li>
        <li>Idk</li>
        <li>Can you repeat the question?</li>
      </ol>
    </div>
  </div>
</div>

然后，您的逻辑就变成了... 

$(function() {
    $('.details').hide();
    $('.description').click(function() {
        $(this).closest('.card').find('.details').toggle(1000);
    })
})

答案 2 :(得分：0)

将about-section从id更改为class。然后您的代码将是这样的。我已经在专辑2和专辑3 中添加了一些内容进行测试

<div class="col-md-4">
  <div class="card mb-4 shadow-sm">
    <img class="card-img-top" src="images/album2.jpeg">
    <div class="content">
      <div class="description">
        The First Album[1989]
      </div>
    </div>
    <div class="about-section">
      <p id="p1"><img class="float-left" src="images/album2.jpeg" style="width: 500px; height:500px"></p>
      <p class="album">The First Album[1989]</p>
      <p>bands’ classic first record, produced by Mellisa Madrid with Floor, Jake Baker, Keifer Leblanch and Adrian Sherwood.</p>
      <div id="albumlist">
        <p>Tracklist </p>
        <ol class="albumlist">
          <li>Yes</li>
          <li>No</li>
          <li>Idk</li>
          <li>Can you repeat the question?</li>
        </ol>
      </div>
    </div>
  </div>
</div>
<div class="col-md-4">
  <div class="card mb-4 shadow-sm">
    <img class="card-img-top" src="images/album1.jpg">
  </div>
  <div class="content">
    <div class="description">
      The Second Album[1990]
    </div>
  </div>
  <div class="about-section">
      <p id="p1"><img class="float-left" src="images/album2.jpeg" style="width: 500px; height:500px"></p>
      <p class="album">The Second Album[1989]</p>
      <p>bands’ classic first record, produced by Mellisa Madrid with Floor, Jake Baker, Keifer Leblanch and Adrian Sherwood.</p>
      <div id="albumlist">
        <p>Tracklist </p>
        <ol class="albumlist">
          <li>Yes</li>
          <li>No</li>
          <li>Idk</li>
          <li>Can you repeat the question?</li>
        </ol>
      </div>
    </div>

</div>


<div class="col-md-4">
  <div class="card mb-5 mb-4 shadow-sm">
    <img class="card-img-top" src="images/town.jpg">
  </div>
  <div class="content">
    <div class="description">The Third Album[1990]</div>
  </div>
      <div class="about-section">
      <p id="p1"><img class="float-left" src="images/album2.jpeg" style="width: 500px; height:500px"></p>
      <p class="album">The Third Album[1989]</p>
      <p>bands’ classic first record, produced by Mellisa Madrid with Floor, Jake Baker, Keifer Leblanch and Adrian Sherwood.</p>
      <div id="albumlist">
        <p>Tracklist </p>
        <ol class="albumlist">
          <li>Yes</li>
          <li>No</li>
          <li>Idk</li>
          <li>Can you repeat the question?</li>
        </ol>
      </div>
    </div>
</div>

在js部分中，您可以编写

$(function() {
  $('.about-section').hide();
  $('.description').click(function() {
    $(this).closest('.content').siblings('.about-section').toggle(1000);
  })
})

选中此fiddle

如果您希望其他div部分在显示一个div时切换（隐藏），则可以将js代码更改为

$(function() {
  $('.description').click(function() {
    $('.about-section').hide();
    $(this).closest('.content').siblings('.about-section').toggle(1000);
  })
})
相关问题
最新问题