Jquery 함수를 두 번 사용했습니다.

여기에 체크 상자의 진행률 표시 줄을 제공하는이 코드가 있습니다. 한 페이지에 여러 진행 막대를 사용하고 싶습니다. 각 div에 대해 고유 한 기능을 어떻게 호출합니까?Jquery 함수를 두 번 사용했습니다.

$(window).load(function(){ 
$(function() { 
    $("#remind").progressbar({ 
     value: 0, 
     max: 100, 
     textFormat: 'fraction', 
     complete: function(event, ui) { 
      alert("Job complete you lazy bum!"); 
     } 
    }); 

    $('.option').on('change', function() { 
     var total = 0; 

     $('.option:checked').each(function() { 
      total += parseInt($(this).val()); 
     }); 

     $("#remind").progressbar("value", total); 
    }); 

}); 
});

이것은 HTML 부분입니다,

<div id="remind"></div> 
<div> 
    <input type="checkbox" class="option" value="25"> Task 1<br> 
    <input type="checkbox" class="option" value="25"> Task 2<br> 
    <input type="checkbox" class="option" value="25"> Task 3<br> 
    <input type="checkbox" class="option" value="25"> Task 4<br> 
</div>

어떻게 변경된 클래스와 ID를 이름으로 모든 JS를 작성하지 않고 또 다른과를 방해하지 않고 동일한 기능을 작업의 또 다른 사업부가 않습니다. 항상 당신이 당신의 스크립트에이 연결, 사용할 수있는 ProgressBar 구성 DIV에 따라 옵션을 잡고 사업부 잘 경우

출처

2012-11-10 user1814979

(: +로 대신 라인을 사용해야합니다 : 라인으로 시작하는이 -) 대신 ID를 사용하는 클래스의

"생각 나게"

+<div class="remind"></div> 
-<div id="remind"></div>

초기화 진행 막대를 대신 ID의 클래스 :

+$(".remind").progressbar({ 
-$("#remind").progressbar({

는 내부에 다른 선택 옵션에 대한 지역화 된 검색을 사용 부모 (DIV) :

+$(this).parent().find('.option:checked').each(function() { 
-$('.option:checked').each(function() {

그리고 마지막으로는 이전의 DIV 옵션으로 진행 높이기 위해 HTML 구조를 사용 : 여기 *
을 내 대답은 자신의 역할의 첫 문장을한다

+$(this).parent().prev('div.remind').progressbar("value", total); 
-$("#remind").progressbar("value", total);

그리고 stackoverflow에 오신 것을 환영합니다! [:

여기가 jsFiddle입니다.

출처

2012-11-10 19:56:32 p1100i

컨테이너에 포장 한 다음이를 연결하여 사용하면 input 요소에 진행률 표시 줄과 관련된 data- 특성을 부여하는 것이 좋습니다.

HTML

<div id="remind" class="progress-bar"></div> 
<div> 
    <input type="checkbox" class="option" value="25" data-progress="remind"> Task 1<br> 
    <input type="checkbox" class="option" value="25" data-progress="remind"> Task 2<br> 
    <input type="checkbox" class="option" value="25" data-progress="remind"> Task 3<br> 
    <input type="checkbox" class="option" value="25" data-progress="remind"> Task 4<br> 
</div> 
<div id="forget" class="progress-bar"></div> 
<div> 
    <input type="checkbox" class="option" value="25" data-progress="forget"> Task 1<br> 
    <input type="checkbox" class="option" value="25" data-progress="forget"> Task 2<br> 
    <input type="checkbox" class="option" value="25" data-progress="forget"> Task 3<br> 
    <input type="checkbox" class="option" value="25" data-progress="forget"> Task 4<br> 
</div>

JQuery와

$(".progress-bar").progressbar({ 
    value: 0, 
    max: 100, 
    textFormat: 'fraction', 
    complete: function(event, ui) { 
     alert("Job complete you lazy bum!"); 
    } 
}); 

$('.option').on('change', function() { 
    var total = 0, 
     progressbarID = $(this).data('progress'); 

    $('input[data-progress="'+progressbarID+'"].option:checked').each(function() { 
     total += parseInt($(this).val()); 
    }); 

    $('#'+progressbarID).progressbar("value", total); 
});

데모http://jsfiddle.net/kksXU/

에서

출처

2012-11-10 20:02:59

Jquery 함수를 두 번 사용했습니다.

답변

관련 문제