如何在类名改变时再次执行js代码

How to execute js code again whenever a class name change?

本文关键字：执行 js 代码 改变      更新时间：2023-09-26

很抱歉我提前编辑了格式，因为我已经很长时间没有提问了。我将尽力遵守所有的规则。

所以我有了这个列表它的工作原理就像一个图像轮播:

<div class="carousel">
  <ul>
    <li class="past"><img src="img1.png"/></li>
    <li class="past"><img src="img2.png"/></li>
    <li class="current"><img src="img3.png"/></li>
    <li class="future"><img src="img4.png"/></li>
    <li class="future"><img src="img5.png"/></li>
  </ul>
</div>

每当我点击一个图像时，被点击的项目的类名将更改为"current"，我将translateX <ul>使"current"<li>看起来"居中"。这些都在"carousel" <div>

但是我有另一个div，它的背景是一个空屏幕的iPhone模型:

<div class = "iphone_screen">
  <div>
    <img class="display" src="blank_screen.png"/>
  </div>
</div>

，我想这样做的"iPhone" <div>:

var imgUrl = $("body").find(".current").find('img').attr('src');
$(".display").attr('src',imgUrl);

但是这个jQuery只会在加载页面时执行一次。

那么，每当我点击<li>项之一并使类名current更改时，我如何再次执行jQuery代码?

更新:感谢大家的回复!我觉得自己好蠢......我不知道我为什么问这个问题.........我之前添加了一个点击功能，但它不起作用。然后我开始寻找其他选择。现在我想一下，选择器肯定是错的

由于驱动一切的事件来自于点击li，您可以在点击任何li 's(在ul内)在carousel分类div中运行。

$(".carousel > ul > li").click(function () {
  var imgUrl = $("body").find(".current").find('img').attr('src');
  $(".display").attr('src',imgUrl);
});

将代码放入函数中。

$(".carousel li").on("click" ,function () {
  var imgUrl = $("body").find(".current").find('img').attr('src');
  $(".display").attr('src',imgUrl);
});
相关文章：