[英]How do I change a specific image when a list class is active
我有一个用物化的网站。 我正在使用带有三个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
元素。
任何帮助是极大的赞赏!
如果您是在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)
}
这是你想要的吗?
$('.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>
我使用了 Midos 逻辑,它运行良好......但是如何将图像恢复为原始图像?
$('.egg').click(function(){
$(this).toggleClass("active");
var new_src = $(this).attr('data-img');
$(".green-egg img").attr("src",new_src);
return;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.