1

我正在尝试使用jQuery UI 中的突出显示效果向用户显示与某些单选按钮选项相对应的说明。但效果会触发两次，即相关页面组件闪烁两次而不是一次。

我看过类似的问题，但它们要么有不适用于我的案例的解决方案，要么有一个不适用于我的案例的解决方案。（或者答案/评论要求提供更多细节或从未给出的示例。）

这是一个带有我的问题的简化版本的jsfiddle 。

如果您单击其中一个单选按钮，则相应的段落会以绿色闪烁两次。从 JS 部分可以看出，上面第二个链接中提出的解决方案（.off('click').on('click')用于防止“克隆”效果）似乎没有什么不同。

我正在使用 jQuery 1.8.0 和 jQuery UI 1.8.22（jsfiddle 分别使用 1.7.2 和 1.8.18，并且有同样的问题），同样的事情发生在 Opera、Chrome 和 Firefox 上。

我该如何解决这个问题并且效果只执行一次？如果有一个解决方法，很高兴使用...

4

3 回答 3

3

问题是触发了 2 个点击事件，一次用于label，一次用于input. 这是因为点击标签“触发”点击输入。更改您的选择器以防止这种情况发生：

    $('#labelChoice1 input').click(function(e) {
        highlightDiv(1);
    });
    $('#labelChoice2 input').click(function(e) {
        highlightDiv(2);
    });

这是更新的小提琴。

于 2012-10-19T03:32:49.210 回答
2

更可扩展的版本可能如下所示：

function highlightDiv(index) {
    $('p#explanation' + index).effect("highlight", {color: '#00ff00'}, 1000);
}

$(':radio').each(function(i) {
    $(this).click(function() {
        // zero-based index
        highlightDiv(i + 1);      
    });
});
​

http://jsfiddle.net/a7kRB/5/

于 2012-10-19T03:38:49.533 回答
1

这似乎工作得很好

$('#labelChoice2').on('click', '#choice2', function() {
    highlightDiv(2);
});

第二个参数基本上只是说明该方法应该应用于#labelChoice2 的哪个子子项，在jsfiddle上尝试表明该解决方案有效

于 2012-10-19T03:45:08.040 回答