如何在列表类处于活动状态时更改特定图像

Question

我有用materialize制作的网站。我正在使用一个带有三个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元素时，将显示活动类。如果您关闭它，它会再次消失。
当相应的li元素处于活动状态时，image-1.jpg应更改为对应于li元素。
任何帮助将不胜感激！

Answer 1

如果您是在active和collapsed之间切换类的人，您可以向切换函数添加额外的代码，以换出该图像的src。

如果没有，您可以使用突变观察器在该 DOM 元素的类发生更改时触发回调。您仍然需要更新src以响应类更改。

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