當列表 class 處於活動狀態時，如何更改特定圖像

Question

我有一個用物化的網站。 我正在使用帶有三個li元素的ul ，它們都是可折疊的。 最重要的是一張帶有圖像的卡片。 我想分別在li元素處於活動狀態時更改圖像，展開。

這里已經有一些類似的問題，但沒有一個真正適合我的問題。
以下是我的代碼的示例布局。

<div class="card">
 <div class="card-image">
  <img src="img/image-1.jpg"/>
 </div>
 <ul class="collapsible expandable">
  <li class="active">
   <div class="collapsible-header">
   <div class="collabsible-body">
  </li>
 </ul>
</div>

當您展開相應的li元素時，將出現活動的 class。 如果您關閉它，它會再次消失。
image-1.jpg應該改變，對應於相應的li元素處於活動狀態時的li元素。
任何幫助是極大的贊賞！

Answer 1

如果您是在active和collapsed之間切換 class 的人，則可以在切換 function 中添加其他代碼，該代碼可以換出該圖像的src 。

如果沒有，您可以使用Mutation Observer在該 DOM 元素的 class 發生更改時觸發回調。 您仍然需要更新src以響應 class 更改。

// will watch target element for changes to the 'class'
// attribute and fire the callback with an array of the
// class names when changed
const observeClassList = (element, callback) => {
  const config = { attributes: true }
  const mutationCallback = mutationsList => {
    mutationsList.forEach(mutation => {
      if (mutation.attributeName === `class`)
        callback([...mutation.target.classList])
    })
  }
  const observer = new MutationObserver(mutationCallback)
  observer.observe(element, config)
}

// example implementation
// it's up to you to watch for any class changes you desire on any element,
// and make changes to any other element (ie updating and image src) when desired
const changeImageOnToggle = (imageElement, toggleElement) => {
  const callback = classArray => {
    if (classArray.includes(`active-li`)) {
      // update the image element src
    }
  }
  observeClassList(toggleElement, callback)
}

Answer 2

這是你想要的嗎？

 $('.active-li').click(function(){ $(this).toggleClass("active"); var new_src = $(this).attr('data-img'); $(".card-image img").attr("src",new_src); $(".card-image p").text('src of this img is '+new_src); });

 .active{ color:red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="card"> <div class="card-image"> <img src="img/image-1.jpg"/> <p > </p> </div> <ul class="collapsible expandable"> <li data-img="img/image-2.jpg" class="active-li"> Lorem </li> <li data-img="img/image-1.jpg" class="active-li"> Lorem </li> </ul> </div>

Answer 3

我使用了 Midos 邏輯，它運行良好......但是如何將圖像恢復為原始圖像？

    $('.egg').click(function(){
  $(this).toggleClass("active");
  var new_src = $(this).attr('data-img');
  $(".green-egg img").attr("src",new_src);
  return;
});