Fonction Jquery utilisée deux fois

J'ai ce code ici qui donne une barre de progression pour les cases à cocher. Je souhaite utiliser plusieurs barres de progression de ce type en une seule page. Comment puis-je rappeler la fonction uniquement pour chaque div?Fonction Jquery utilisée deux fois

$(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); 
    }); 

}); 
});

Ceci est la partie 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>

Comment dois-je un autre div de même travail de fonctionnalité sans interférer l'autre et pourtant sans écrire tous les js avec des noms modifiés de classe et id.

Source

2012-11-10 user1814979

Eh bien, si la div tenant les options TOUJOURS la barre de progression div vous pouvez utiliser cette connexion dans votre script, (ligne commençant par: + doit être utilisé à la place de la ligne avec: -)

au lieu de id classe d'utilisation "rappeler":

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

au lieu

initialize par classe d'progressbar id:

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

utiliser une recherche localisée pour les autres options cochées à l'intérieur de le parent (div):

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

et enfin utiliser la structure HTML pour augmenter les progrès avec l'option précédente div:
* joue ici la première phrase de ma réponse son rôle

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

Et bienvenue à stackoverflow! [:

Voici un jsFiddlepour le voir fonctionner.

Source

2012-11-10 19:56:32 p1100i

Vous devez les placer dans un conteneur et les utiliser pour les relier, ou mieux pour donner aux éléments input un attribut data- qui les relie à leur barre de progression.

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

Démo àhttp://jsfiddle.net/kksXU/

Source

2012-11-10 20:02:59

Fonction Jquery utilisée deux fois

Répondre

Questions connexes