javascript - 如何在类名更改时再次执行js代码？

Question

对不起，我提前编辑了格式，因为我已经很久没有提问了。我会尽力遵守所有规则。

所以我有这个列表，它像图像轮播一样工作:

<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”，我将翻译X <ul>使“当前”<li>看起来“居中”。所有这些都在“轮播”中 <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> 时，如何再次执行我的 jQuery 代码？元素并制作类(class)名称current改变？

更新:谢谢大家的回复!感觉好傻。。。。。不知道为什么问这个问题。。。。。我之前加了一个点击功能，但是没有用。然后我开始寻找替代方案。现在想想，选择器肯定是错的。

Answer 1

由于驱动一切的事件来自对 li 的点击，您可以对任何 li 的点击运行(在 ul 内) code>) 在分类为 div 的轮播中。

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