1

選択したボックスに本質的に「投票」するクリック機能を備えたいくつかのdivがあります。

これは、誰かが 2 番目または 3 番目のボックスも選択するまでうまく機能します。クリック機能は div のクラスに関連付けられているため、一度クリックした後、何らかの方法でクリック機能を無効にする必要があります。

$('.vote').on('click',function(){
    $(this).append('<div id="voted">Thanks!<form><input type="text" name="comment"></form></div>');
});

<div class="vote">Option A</div>
<div class="vote">Option B</div>
<div class="vote">Option C</div>

ユーザーがフォーム入力をクリックできるように、「one」関数を使用して現在の div のクリック機能を無効にする必要があります。問題は、他のオプションがまだ「クリック可能」であることです。したがって、ユーザーは、必要に応じて 3 つのオプションすべてに投票できます。これを1票に制限するにはどうすればよいですか?

4

3 に答える 3

3

提供されている両方のソリューションが機能しますが、いずれにせよ使用されないため、イベント ハンドラーを削除することは理にかなっています。

私はこのコードを提案します

 $('.vote').on('click.vote', function () {
      $(this).append('<div id="voted">Thanks!<form><input type="text" name="comment"></form></div>');
      $('.vote').off('click.vote');
 });

名前空間イベントを使用すると、他のクリック イベント ハンドラーが存在する場合でも、それを変更しません。

于 2012-07-28T12:38:59.517 に答える
1

クラスはピリオドで始めるべきではありません:

<div class="vote">Option A</div>
<div class="vote">Option B</div>
<div class="vote">Option C</div>

フラグを使用して、クラス全体を 1 回だけクリック可能にします。

var flag = true;

$('.vote').one('click',function(){
    if (flag) {
        $(this).append('<div id="vote">Thanks!<form><input type="text" name="comment"></form></div>');
        flag = false;
    }
});

フィドル

于 2012-07-28T12:33:02.670 に答える
0 
var clicked=0;

$('.vote').on('click',function(){
    if(clicked==0){
        clicked=1;
            $(this).append('<div id="voted">Thanks!<form><input type="text" name="comment"></form></div>');
    }
});

変数を使用します。その値を設定します

于 2012-07-28T12:34:24.720 に答える