1

2 つのボタンがあり、これらの 2 つのボタンで合計クリック数が増加します。(合計は個別にカウントされます) ユーザーはそのうちの 1 つだけを選択できます。つまり、ユーザーが以前に buttonA をクリックし、buttonB を再度クリックした場合です。ButtonA は - 1 になり、ButtonB は + 1 になります。

次のコードがあり、問題があります。ボタンがクリックされる前にクリックされなかった場合

buttonA (0) - buttonB (0).

buttonA (1) - buttonB (0) ユーザーがボタンAをクリックすると、次のコードが表示されると思われます

buttonA (1) - buttonB (-1)

私が欲しいのは、ボタンはユーザーが以前にクリックしたボタンだけを減らすことです。また、コードを改善するにはどうすればよいですか? ぐちゃぐちゃです。

$this.addClass('active').siblings().removeClass('active');
if ($this.is('span[name="ans_yes"]')) {
    yes_no = 1;
    currentVal = parseInt($this.find('.badge').html());
    $this.find('.badge').html(currentVal + 1);

    currentVal2 = parseInt($id.find('.ans-no').html());
    $id.find('.ans-no').html(currentVal2 - 1);
} else {
    yes_no = 0;
    currentVal = parseInt($this.find('.badge').html());
    $this.find('.badge').html(currentVal + 1);

    currentVal2 = parseInt($id.find('.ans-yes').html());
    console.log(currentVal2);
    $id.find('.ans-yes').html(currentVal2 - 1);
}

更新 -デモ

4

3 に答える 3

1

HTML 構造をかなり似たものにしようとしましたが、JS を完全にホースしました。必要に応じてクラスを再調整する必要がありますactive.CSSがないと、クラスが何に使用されているのかわからなかったからです.

var answered = {};  

$('.ans-yes-no').on('click', function(e) {
    var questionId = $(this).parent().attr('id');
    var currentAnswer = answered[questionId];
    var count = parseInt($(this).children('.badge').html());

    if ( currentAnswer == $(this).attr('name') ) {
        // Turning off
        $(this).children('.badge').html(count-1);
        delete answered[questionId];
    } else {
        // If we have a different answer, turn that off
        if ( currentAnswer ) {
            var oldCountEl = $("#"+questionId).children("span[name="+currentAnswer+"]").children('.badge');
            var oldCount = parseInt(oldCountEl.html());
            oldCountEl.html( oldCount - 1 );
        }

        // Turning on
        $(this).children('.badge').html(count+1);
        answered[questionId] = $(this).attr('name');
    }
});

http://jsfiddle.net/TtkDG/3/で動作するデモ。buttonA と buttonB の複数のインスタンスがあります。

編集: 明確にするために、質問識別子を含む div でボタンをラップする必要がありました。それを見逃さないようにしてください。

于 2013-02-16T18:19:27.957 に答える
0

の値を切り替える単一の関数を作成しましたbadge。増分がゼロ未満の場合、ゼロを出力します。

また、使用するよりも要素に別のクラスを追加する方が簡単であることに注意してくださいname

 $('.ans-yes-no').on('click', function (e) {
      e.preventDefault();

      var $this = $(this),
          $otherBtn = $this.siblings('.ans-yes-no');

      var $btnWrap = $this.closest('.topic-footer');
      /* check if user has already selected, test "active" class length*/
      var alreadyVoted = $btnWrap.find('.active').length;
      if (alreadyVoted) {
          if ($this.is('.active')) {
              /* do nothing if already active?? */
              return;
          } else {
              $this.add($otherBtn).toggleClass('active');
          }
      } else {
          $this.addClass('active');
      }

      toggleValue($this, 'up');
      toggleValue($otherBtn, 'down');
  });

  function toggleValue($element, direction) {
      $element.find('.badge').text(function (i, currVal) {
          var value = parseInt(currVal, 10);
          direction == 'up' ? value++ : value--;
          return value > -1 ? value : 0;
      })
  }

デモ: http://jsfiddle.net/MZyxW/

ユーザーが追加し続けることができる限り、またはactiveユーザーが既に回答をクリックしている場合に各ページの読み込みをクラスで更新する場合、どのような動作が必要かは 100% 明確ではありません。

于 2013-02-16T19:03:50.110 に答える
0

最初に falseの変数を使用し、減算よりも変数が true かどうかを確認することをお勧めしますdidtheuserclick。それ以外の場合は減算部分を無視し、クリック関数の最後で変数を true に設定します。http:/のデモを作成しました。 /jsfiddle.net/TtkDG/1/

また、クリックごとにインクリメントする単純な整数変数を使用して、変数が1に等しいかどうかを確認することもできますが、これは同じロジックですが、これだけを使用しても変数をインクリメントするのは無意味です。特に、高い数値に到達する場合.

それが役に立てば幸い！

于 2013-02-16T18:10:50.733 に答える