1

I'm trying to use the highlight effect from jQuery UI to show the user an explanation corresponding to some radio button choices. But the effect triggers twice, i.e. the relevant page component flashes twice instead of once.

I've had a look at similar questions, but they either have solutions that don't apply to my case or have a solution that doesn't work in my case. (Or the answers/comments ask for more details or an example which is never given.)

Here is a jsfiddle with a simplified version of my problem.

If you click on one of the radio buttons, the corresponding paragraph flashes green twice. As you can see from the JS section, the solution proposed in the second link above (using .off('click').on('click') to prevent the "cloning" effect) doesn't seem to make a difference.

I'm using jQuery 1.8.0 and jQuery UI 1.8.22 (jsfiddle uses 1.7.2 and 1.8.18, respectively, and has the same issue) and the same thing happens on Opera, Chrome, and Firefox.

How can I work around this and have the effect only execute once? Happy to use a workaround if there is one...

4

3 に答える 3

3

問題は、 に対して 1 回、 に対して 1 回、2 つのクリック イベントがトリガーlabelされることinputです。これは、ラベルのクリックが入力のクリックを「トリガー」するためです。これを防ぐためにセレクターを変更します。

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

これが更新された fiddleです。

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

2 番目のパラメーターは、基本的に #labelChoice2 のどのサブ子にメソッドを適用するかを指定するだけです。jsfiddle で試してみると、このソリューションが機能することがわかります

于 2012-10-19T03:45:08.040 に答える