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

我有一个用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

元素时，将显示活动类。如果您关闭它，它会再次消失。

image-1.jpg

应该更改，当相应的

li

元素处于活动状态时，对应于

li

元素。
非常感谢您的帮助

这就是你想要的吗

$（'.active li'）。单击（函数（）{
$（此）.toggleClass（“活动”）；
var new_src=$（this.attr（'data-img'）；
$（“.card image img”）.attr（“src”，新的_src）；
$（“.card image p”）.text（'此img的src为'+new_src'）；
});
.active{
颜色：红色；
}




洛勒姆


洛勒姆


如果您是将类在
活动
和
折叠
之间切换的人，您可以向切换函数添加额外的代码，该函数可以调出该图像的
src

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

//将监视目标元素对“类”的更改
//属性，并使用
//更改时的类名
常量observeClassList=（元素，回调）=>{
const config={attributes:true}
常量mutationCallback=mutationsList=>{
mutationsList.forEach（mutation=>{
if（mutation.attributeName==`class`）
回调（[…mutation.target.classList]）
})
}
const observer=新的MutationObserver（mutationCallback）
observer.observe（元素，配置）
}
//示例实现
//这取决于您对任何元素所需的任何类更改，
//并在需要时更改任何其他元素（即更新和图像src）
常量changeImageOnToggle=（imageElement，toggleElement）=>{
const callback=classArray=>{
if（classArray.includes（`activeli`））{
//更新图像元素src
}
}
observeClassList（toggleElement，回调）
}
那么您使用javascript/jQuery将“active”添加到li元素中了吗？为什么不把图像也设为“活动”类呢？在你的第一个建议中，你的意思是用户在
active
和
collapsed
之间切换类吗？图像交换工作得很好，但现在我的
li
元素不再扩展了。你知道吗？你的
元素不会再膨胀了？你能说得更多吗？我把你的jquery部分放在我的
init.js
中，像你那样修改
li
元素，并放在我自己的图片中。现在，当我单击
li
元素时，图片会发生变化，但是
li
元素不再像以前那样展开。每个
li
元素中都有一个标题和一个正文，其中包含文本。我的脚本中确实加载了jquery。这是示例代码。在这种情况下，Click（）函数可能会阻止Click（）函数。如果您还有一个函数，请使用这些
标记单击，我认为您需要将它们分组到一个函数中。$（'.active li'）。单击（function（）{$（this）.toggleClass（“active”）；var new_src=$（this）.attr（'data-img'）；$（.card image img”）.attr（“src”，new_src）；$（.card image p”）。text（'this img的src是'+new_src）；///在此处添加扩展代码}）；