입력 값이 증가하면 div에 클래스가 있습니다. jQuery

Question

각 데이터 값이 연결된 특정 수의 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의 설정 방법의 예이다 : 제 1 및 제 2 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> 

, 그 입력 값은 500이 될 것이다. 세 번째 div의 두 번째 항목이 선택되면 입력 값은 300이어야합니다.

바로 지금 사용자가 첫 번째 div를 선택하면 값은 300입니다. 두 번째 div를 선택하면 값이 변경됩니다 200이 아니라 500이됩니다. 또한 사용자가 첫 번째 div를 클릭하면 값은 300을 표시하지만 c 다시 DIV 핥고, 값은 귀하의 total 변수가 지역 변수입니다 -300 대신

Answer 1

0으로 변경됩니다, 그래서 함수가 호출 될 때마다 다시 얻는다 (그리고 함수 외부에 액세스 할 수 없습니다). 당신이 if/else 구조를 사용할 수 있습니다

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

주, 당신은 ! 연산자와 같은 .hasClass() 테스트를 반복 할 필요가 없습니다 : 그것은 통화 사이의 값을 유지하도록 그러니 주위의 범위로 이동합니다. 또는 대신 ?:를 사용할 수 있습니다

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

이미 jQuery를 객체, 그래서 당신이 그것을 사용할 때 그냥 item.hasClass(...) 말할 수있는 변수 item를 만드는 어느 쪽이든, 당신은 그것을 포장 할 필요가 없습니다하는 것으로 $()에 다시 있습니다.

또는,이를 구현하기위한 다른 방법은 선택한 모든 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 
});