Question

HTML看起来像：

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

此HTML重复一次或多次，因此在同一页面上可能会有很多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);
});

区别在于：

在这种情况下，只需使用“dl＆gt; dt”（或“dl dt”）代替find语法;
此代码会查看该内容是否可见而不是src图像，特别是在延迟的情况下可能会失去同步;
最后一行的正则表达式只是替换任何正确的正则表达式以适应不规则性。

Answer 2

您可以为图片代码设置ID或Class属性，这会稍微清理您的代码。我还建议使用一个插件 - 有很多插件可以免费在线提供这类东西，它只需要一种方法。

HTML：

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

JavaScript（使用jQuery）：

$('#myimage').click(function(){
  $(this).parent().get(0).toggle(200);
  var src = $(this).attr('src');

  if (src.lastIndexOf("open.gif") != -1) {
    $(this).attr('src', src.replace("open.gif", "closed.gif");
  } else {
    $(this).attr('src', src.replace("closed.gif", "open.gif");
  }
});

希望有所帮助：）

Answer 3

您可以使用设置，但这里是一般的想法，CSS和JS的组合...

<style>

    dl dt { background: transparent url(open.gif) no-repeat scroll top left; padding-left: 20px; }
    .open dt { background-image: url(close.gif); }

</style>

<dl class="open">
    <dt>Something 1</dt>
    <dd>Something 1 Text</dd>
</dl>

<script>

    $('dl dt').click(function()
    {
        $(this).next().toggle(200);
        $(this).parent().toggleClass("open",$('dd:visible',$(this).parent()).length);
    });

</script>

Answer 4

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

$('.something').click(function() {
    // toggle the dd
    $(this).next().toggle(200);
    // replace the expand / close image
    var img = $(this).find('.switch');
    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图像替换代码吗？

4 个答案: