增加輸入值是div有類; jQuery

Question

我有一定數量的div，每個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> 

如果第一和第二個div被選擇，則該輸入的值應爲500。如果選擇了第三個div的第二個，那麼輸入的值應該是300.

現在，如果用戶選擇第一個div，則值爲300.如果他們然後選擇第二個div，則值將更改到200而不是500.另外，如果用戶點擊第一個div，該值將顯示300，但是如果他們c舔再次股利，該值將變爲-300，而不是0

Answer 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'); 

請注意，您要創建一個變量item已經是一個jQuery對象，所以當你使用它，你就可以說item.hasClass(...)無論哪種方式，你不需要把它包再次在$()。

OR，實現這個另一種方式是遍歷所有選定的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 
});