2

以下のコードでは、[投票] をクリックすると投票結果画面が表示されますが、[投票に戻る] をクリックすると投票は再表示されますが、[オプションを表示] ボタンは表示されなくなります。「投票に戻る」をクリックしたときにこのボタンが非表示にならないようにする方法はありますか。

これがフィドルです：http://jsfiddle.net/E2gku/2/

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" charset="utf-8" src="http://static.polldaddy.com/p/5968383.js"></script>
<noscript><a href="http://polldaddy.com/poll/5968383/">This is a test question ?</a></noscript>

<style>
.pds-pd-link {
display: none !important;
}
.pds-box {
    width: 200px !important;
}
.pds-input-label{
    width: auto! important;
}
.PDS_Poll{
    margin-bottom:15px;
}


</style>
<script type="text/javascript">



$(document).ready(function() {

    $('.pds-question').append('<input type="button" class="showanswer" value="Show Options"/>');

        $('.pds-vote').css('display' , 'none');
        $('.pds-answer').css('display' , 'none');
        $('.pds-vote-button').css('display' , 'none');
        $('.pds-view-results').css('display' , 'none'); 

    $('.showanswer').on('click', function () {

            $('.pds-vote').show();
             $('.pds-answer').show();
             $('.pds-vote-button').show();
             $('.pds-view-results').show();

        $('.showanswer').hide();
        $('.pds-question').append('<input type="button" class="hideanswer" value="Hide Options"/>');

        $('.hideanswer').on('click', function () {
                $('.pds-vote').hide();
                 $('.pds-answer').hide();
                 $('.pds-vote-button').hide();
                 $('.pds-view-results').hide();
                $('.showanswer').show();
                 $('.hideanswer').hide();
        });

});

});
</script>
4

2 に答える 2

1

ユーザーがクリックして質問に戻るときに、イベント委任を使用してボタンを再追加できます。

$('body').on('click', '.pds-return-poll', function() {
    setTimeout(function(){
        $('.pds-question').append('<input type="button" class="showhideanswer" value="Hide Options"/>');
    }, 10);
});

私はあなたのコードも少し乾かしました：

$(document).ready(function() {
    $('.pds-answer, .pds-vote').css('display' , 'none');
    $('.pds-question').append('<input type="button" class="showhideanswer" value="Show Options"/>');

    $('body').on('click', '.pds-return-poll', function() {
        setTimeout(function(){
            $('.pds-question').append('<input type="button" class="showhideanswer" value="Hide Options"/>');
        }, 10);
    }).on('click', '.showhideanswer', function() {
        $('.pds-answer, .pds-vote').toggle();
        if (this.value == 'Show Options')
            $(this).val('Hide Options');
        else
            $(this).val('Show Options');
    });
});

JSFiddle。

タイムアウトは、デフォルトの関数が優先されるためです。このタイムアウトは遅延オブジェクトとして解釈してください。

そして明らかに、ボタンが動的に追加されているため、上記のコードのようにイベント委任も必要になります (それまたはイベントハンドラーの再バインド、選択)。

<strong>編集: Firefox のバグを修正しました。

edit2:もう少し乾燥させました。セレクターは現在一度しか使用されていないため、セレクターのキャッシュを破棄しました。これは、のセレクターをのハンドラー$(document).ready内で再利用できないためです。同じ要素を再利用する代わりに、結果ページと投票ページに戻ります。showhideanswerclick

于 2012-07-02T22:52:45.873 に答える
0

Polldaddyはボタンを非表示にしません。代わりに、.innerHTMLのを置き換えて#PDI_container5968383、新しいボタンを完全に削除します。PDV_go5968383()PDスクリプトの関数を見てください。

function PDV_go5968383(){
    /* other code */
    // PDV_html5968383 is prepared HTML for the container
    _$("PDI_container5968383").innerHTML = PDV_html5968383;
    /* other code */
}

これにより、すべての追加が削除されます。PDコンテナの外側にボタンを追加し、CSSで配置することができます。これにより、それらが削除されるのを防ぐことができます。

于 2012-07-02T21:58:56.387 に答える