[英]How do I change a specific image when a list class is active
I have website which is made with materialize.我有一个用物化的网站。 I am using a
ul
with three li
elements which are all collapsible.我正在使用带有三个
li
元素的ul
,它们都是可折叠的。 On top of that is a card with an image.最重要的是一张带有图像的卡片。 I want to change the image when a
li
element is active, respectively, expanded.我想分别在
li
元素处于活动状态时更改图像,展开。
There were some similar question on here already, but none really fit my problem.这里已经有一些类似的问题,但没有一个真正适合我的问题。
Following is an example layout of my code.以下是我的代码的示例布局。
<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>
The active class appears when you expand the respective li
element.当您展开相应的
li
元素时,将出现活动的 class。 It disappears again if you close it.如果您关闭它,它会再次消失。
image-1.jpg
should change, corresponding to the li
element when the respective li
element is active. image-1.jpg
应该改变,对应于相应的li
元素处于活动状态时的li
元素。
Any help is greatly appreciated!任何帮助是极大的赞赏!
If you are the one toggling the class between active
and collapsed
, you could add additional code to your toggle function which can swap out the src
of that image.如果您是在
active
和collapsed
之间切换 class 的人,则可以在切换 function 中添加其他代码,该代码可以换出该图像的src
。
If not, you can use a Mutation Observer to fire a callback when the class of that DOM element has changed.如果没有,您可以使用Mutation Observer在该 DOM 元素的 class 发生更改时触发回调。 You'll still have to update the
src
in response to the class change.您仍然需要更新
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)
}
Is this what you want?这是你想要的吗?
$('.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>
I used Midos logic and it worked fine... but how do I return the image back to its original image?我使用了 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.