Как выбрать разные div с одной и той же функцией jQuery?

Question

Я пытался создавать div, где я показываю больше информации, когда нажимаю на div, но я также хочу сделать то же самое для разных div, которые имеют разную информацию.(как музыкальная дискография).

Когда я нажимаю на div, он работает нормально, но когда я нажимаю на все остальные div, они все запускают первую функцию jQuery только из первого div и показывают то же самоеинформация как первый див.Это потому, что все они названы одинаково, я полагаю.Но мне было интересно, как я мог бы запускать одну и ту же функцию, но не меняя слишком много вещей или создавая новую функцию для каждого элемента div?Я хотел бы сохранить мой код как можно более сухим.

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

Answer 1

Дайте вашему второму предмету общий класс.

<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);
    })
})

Answer 2

измените 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);
  })
})

Answer 3

Поскольку ваш HTML не соответствует шаблону, вы всегда можете использовать атрибуты данных и добавить класс в свои разделы about, чтобы они автоматически скрывались

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