0

这让我发疯了......我有一个 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') >>always<< 返回 true。

我错过了什么？

编辑：

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

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

在这种情况下，我使用该技术将相当于参数的内容传递给 javascript 函数。之所以有效，是因为 $(this) 指向触发事件的元素，因此我可以检查其属性以查找参数。

4

1 回答 1

0

问题是您.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'));
    });
});
于 2012-07-04T02:07:47.240 回答