3

チェックボックスの進行状況バーを表示するこのコードがあります。このような進行状況バーを 1 つのページで複数使用したいと考えています。divごとに関数を一意に呼び出すにはどうすればよいですか?

$(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>

同じ機能の別の div を他のものに干渉せずに、変更されたクラスと ID 名ですべての js を作成せずに動作させるにはどうすればよいですか。

4

2 に答える 2

1

それらをコンテナーにラップし、それを使用してそれらを関連付けるか、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-10T20:02:59.397 に答える
1

オプションを保持する div が常にプログレスバーの div に従う場合、スクリプトでこの接続を使用できます ( 行: - の代わりに: + で始まる行を使用する必要があります)。

id use class "remind" の代わりに:

+<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() {

最後に HTML 構造を使用して、 prev div オプションで進行状況を向上させます。

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

そして、stackoverflow へようこそ! [:

これが機能することを確認するためのjsFiddle を次に示します。

于 2012-11-10T19:56:32.793 に答える