Могу ли я улучшить этот код замены изображения JQuery?

Question

HTML выглядит примерно так:

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

Этот HTML повторяется 1 или более раз, поэтому на одной странице может быть много экземпляров HTML.

Jquery, который я использую для расширения dd и замены изображения:

$("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. Регулярное выражение в последней строке просто заменяет все, что там, на то, что правильно, чтобы учесть нарушения.

Answer 2

Вы можете установить идентификатор или атрибут класса для тега изображения, который немного прояснит ваш код. Я бы также порекомендовал использовать плагин - существует множество плагинов для такого рода вещей, доступных онлайн бесплатно, и все, что для этого требуется, - это один метод.

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'));
});