JQuery SlideToggle 替换图像 src

Question

当单击向上/向下箭头滑动隐藏的 div 时，会调用此函数。如果 div 被隐藏，则箭头指向下，并在显示 div 时变为向上。如果显示了 div，则箭头向上指向隐藏 div，并在关闭 div 时变为向下。我只是想知道是否有更有效的方法来做到这一点，或者这是否是正确的方法。谢谢。

  function showInfo(info_id) {
    var img_id = '#arrow_'+info_id;
    var div = '#info_'+appointment_id;
    $(div).slideToggle('normal',function() {
        if ($(this).is(':visible')) {
            $(img_id).attr('src',$(img_id).attr('src').replace('_down','_up'));
        }
        else {
            $(img_id).attr('src',$(img_id).attr('src').replace('_up','_down'));
        }
    });}

Answer 1

首先，您所拥有的完全正确。如果你想稍微缩短它(似乎你可能从问题中看出)并且你使用的是 jQuery 1.4+，你可以将一个函数传递给 .attr() ，像这样:

function showInfo(info_id) {
  $('#info_'+appointment_id).slideToggle('normal',function() {
    $('#arrow_'+info_id).attr('src', function(i, src) {
      return $(this).is(':visible') ? src.replace('_down','_up')
                                    : src.replace('_up','_down');
    });
  });
}

格式为.attr('attributeToChange, function(index, currentVal) {}) ，因此您可以以非常干净的方式在函数中使用当前值。