jquery - 我可以改进这个 JQuery 图像替换代码吗？

Question

HTML 看起来有点像:

<dl>
  <dt>
    <img src='Images\Something\expand-close.gif' /> Something 1
  </dt>
  <dd>Something 1 Text</dd>
</dl>

此 HTML 重复 1 次或多次，因此同一页面上可能有许多 HTML 实例。

我用来扩展 dd 并替换图像的 Jquery 是:

$("dl").find("dt").click(function() {
  // toggle the dd
  $(this).next().toggle(200);

  // replace the expand / close image
  var img = $(this).find("img");
  var src = img.attr("src");
  if (src.lastIndexOf("open.gif") != -1)
  {
    img.attr("src", src.replace("open.gif", "closed.gif"));
  }
  else
  {
    img.attr("src", src.replace("closed.gif", "open.gif"));
  }
});

这一切都工作正常并且完全符合我的需要。我的问题是，JQuery功能可以做得更好吗？我对使用 JQuery 还比较陌生，这是我随口说的一个片段。如果可以做得更好，请解释这些更改，因为我正在尝试学习如何编写更好的 JQuery 代码。任何其他指示或建议也将不胜感激。

Answer 1

已经很接近了。尝试:

$("dl > dt").click(function() {
  var dd = $(this).next();
  if (dd.is(":visible")) {
    var newimage = "closed.gif";
    dd.hide(200);
  } else {
    var newimage = "open.gif";
    dd.show(200);
  }
  var img = $(this).find("img");
  img.attr("src", img.attr("src").replace(/(open|closed)\.gif$/, newimage);
});

差异是:

1. 在这种情况下，只需使用“dl > dt”(或“dl dt”，视情况而定)而不是查找语法；
2. 此代码查看事物是否可见，而不是查看 src 图像，这可能会导致不同步，尤其是考虑到延迟；
3. 最后一行的正则表达式只是将其中的任何内容替换为正确的内容，以适应不规则的情况。