Question

这让我疯了......我有一个javascript函数可以切换我使用HTML5技术传递的元素的可见性。我想在触发锚元素内交换img标签显示的图像，使其对应于展开或折叠元素的状态。

我正在使用以下代码：

    $('a.expand-collapse').click(function () {
    var targetID = $(this).attr('data-expcoltarget');
    var target = $('div#' + targetID);
    debugger;

    target.toggle('blind');

    if (target.is(':visible')) imgSrc = contentRoot + 'images/collapse.gif';
    else imgSrc = contentRoot + 'images/expand.gif'; 

    $(this).find('img').first().attr('src', imgSrc);
});

不幸的是，target.is（'：visible'）＆gt;＆gt;总是＆lt;＆lt;无论目标元素的可见性状态如何，都返回true。

我错过了什么？

编辑：

感谢您愿意查看标记，但事实证明没有必要找到解决方案。

关于'data-expcoltarget'是什么，这是一种用于为元素分配任意值的HTML5技术。任何带有后缀数据的东西都会被解析器忽略。

在这个例子中，我正在使用该技术将相当于参数的内容传递给javascript函数。这是因为$（this）指向触发事件的元素，所以我可以检查它的属性来查找参数。

Answer 1

问题是您使用.toggle()参数调用'blind'，这意味着它充当动画方法。动画以异步方式发生，直到完成其余的单击处理程序后才会完成。

如果您在没有参数的情况下致电.toggle()，切换将立即（无动画），因此其余代码将起作用。

如果您想保留动画，解决问题的一种方法是将图像更改代码移动到.toggle()函数的完整回调中：

$('a.expand-collapse').click(function () {
    var $this = $(this),
        targetID = $this.attr('data-expcoltarget'),
        target = $('#' + targetID);

    target.toggle('blind', function() {
       if (target.is(':visible'))
          imgSrc = contentRoot + 'images/collapse.gif';
       else
          imgSrc = contentRoot + 'images/expand.gif'; 

       $this.find('img').first().attr('src', imgSrc);
    });
});

（请注意，回调函数this内部是要切换的元素，因此您需要从外部保留对$(this)的引用，以便它引用锚点。）

我可能会进一步“简化”到：

$('a.expand-collapse').click(function () {
    var $this = $(this),
        targetID = $this.attr('data-expcoltarget'),
        target = $('#' + targetID);

    target.toggle('blind', function() {
       $this.find('img').first().attr('src',
           contentRoot + (target.is(':visible') ? 'images/collapse.gif'
                                                : 'images/expand.gif'));
    });
});

JQuery toggle（）函数：切换相关的img src

1 个答案: