0

それぞれに関連付けられたデータ値を持つ特定の数の div があります。ユーザーが div を選択すると、クラスが div に追加されます。クラスが追加された div に応じて、入力ボックスの値を更新したいと思います。ユーザーがボックスをもう一度クリックしてクラスを削除した場合は、値を減らしたいと思います。これが私のjQueryです：

$(".vendor-icon").click(function() {
  $(this).toggleClass('vendor-icon-active');

  var total = 0;
  var item = $(this);

  if ($(item).hasClass('vendor-icon-active')) {
    total = total + $(item).data('value');
  }

  if (!$(item).hasClass('vendor-icon-active')) {
    total = total - $(item).data('value');
  }

});

div の設定方法の例を次に示します。

<div class="vendor-icon website-management" data-value="300"></div>
<div class="vendor-icon make-an-offer" data-value="200"></div>
<div class="vendor-icon email-marketing" data-value="100"></div>

1 番目と 2 番目の div が選択されている場合、入力の値は 500 である必要があります。3 番目の div の 2 番目が選択されている場合、入力の値は 300 である必要があります。

現在、ユーザーが最初の div を選択すると、値は 300 になります。次に 2 番目の div を選択すると、値は 500 ではなく 200 に変わります。また、ユーザーが最初の div をクリックすると、値は 300 と表示されますが、 div をもう一度クリックすると、値が 0 ではなく -300 に変わります。

4

1 に答える 1

1

total変数はローカル変数であるため、関数が呼び出されるたびにリセットされます (関数の外部ではアクセスできません) 。したがって、呼び出し間で値が保持されるように、周囲のスコープに移動します。

var total = 0;
$(".vendor-icon").click(function() {
  var item = $(this).toggleClass('vendor-icon-active');    
  if (item.hasClass('vendor-icon-active')) {
    total += item.data('value');
  } else {
    total -= item.data('value');
  }
});

構造体を使用できることに注意してください。演算子で同じテストif/elseを繰り返す必要はありません。または、代わりに次を使用できます。.hasClass()!?:

total += item.hasClass('vendor-icon-active') ? item.data('value') : -item.data('value');

どちらの方法でも、すでに jQuery オブジェクトである変数itemを作成していることに注意してください。したがって、それを使用するときは、単に , と言うことができます。再度item.hasClass(...)ラップする必要はありません。$()

または、これを実装するもう 1 つの方法は、選択したすべての div をループして、クリックするたびに追加することです。

$(".vendor-icon").click(function() {
  $(this).toggleClass('vendor-icon-active');

  var total = 0;    
  $(".vendor-icon-active").each(function() {
     total += $(this).data('value');
  });    
  // do something with total
});
于 2013-10-15T20:11:21.967 に答える