Список аккордеонных стилей добавить и удалить проблему класса

Question

У меня есть базовый список с названиями.В идеальном мире, когда пользователь щелкает заголовок или вложенный значок, отображается описательный абзац, и значок меняется.Если пользователь переходит от заголовка к заголовку, открывая и закрывая, прежде чем двигаться дальше, тогда нет проблем, но открывайте и двигайтесь, чтобы открыть следующее, и все становится странным и ошибочным.Абзац будет переключаться, но значок останется прежним.

Сценарий совершенного мира, заголовок или изображение нажаты, значок меняется на минус, и отображается абзац, абзац остается открытым, а следующий заголовок нажимается, чтоизменение абзаца и значка и так далее.Хэшировал и перефразировал это снова и снова, и я в растерянности.

$(".hold-text").click(function() {
  if (!$("img").hasClass("foo")) {
    $(this).find(".title").children("img").attr("src", "minus-icon.png").addClass("foo");
    $(this).children("p").toggle();
  } else {
    $(this).find(".title").children("img").attr("src", "plus-icon.png").removeClass("foo");
    $(this).children("p").toggle();
  }
});

.hold-text>p {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="hold-text">
    <h3 class="title">lorem blah<img class="img" src="plus-icon.png" /></h3>
    <p>text</p>
  </li>
  <li class="hold-text">
    <h3 class="title">lorem blah<img class="img" src="plus-icon.png" /></h3>
    <p>text</p>
  </li>
  <li class="hold-text">
    <h3 class="title">lorem blah<img class="img" src="plus-icon.png" /></h3>
    <p>text</p>
  </li>
</ul>

Answer 1

• !$("img").hasClass проверит любое изображение с классом .. вы можете использовать !$(this).find("img").hasClass и вместо оператора if вы можете использовать .toggleClass() .. см. Следующий пример

$(".hold-text").click(function() {
  var Getimage = $(this).find("img");         //Get the Image
  Getimage.attr("src", Getimage.attr('src') == "minus-icon.png" ? "plus-icon.png" : "minus-icon.png").toggleClass("foo");  // toggle between image src and toggle the class
  $(this).find("p").toggle();  // toggle p
  console.log(Getimage.attr('src'));   // Just to check the src is changed
});

.hold-text>p {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="hold-text">
    <h3 class="title">lorem blah<img class="img" src="plus-icon.png" /></h3>
    <p>text</p>
  </li>
  <li class="hold-text">
    <h3 class="title">lorem blah<img class="img" src="plus-icon.png" /></h3>
    <p>text</p>
  </li>
  <li class="hold-text">
    <h3 class="title">lorem blah<img class="img" src="plus-icon.png" /></h3>
    <p>text</p>
  </li>
</ul>

Объяснение: Getimage.attr('src') == "minus-icon.png" ? "plus-icon.png" : "minus-icon.png" эта строка означает, что если src изображения "minus-icon.png", измените на "plus-icon.png" else "minus-icon.png"