Problème avec mon initialiser

Question

pourrait quelqu'un m'aider s'il vous plaît, pour une raison quelconque sur la page de chargement les boutons semblent tous être dans la position "sur" même si j'ai une case "cochée" et l'autre non vérifiée.

Le problème semble être dans if/then de initialize_slideCheck(). Je suppose que j'utilise mal le prochain() ???

Comment puis-je cibler uniquement le .checkboxTrigger qui est enveloppé dans la même div que la case à cocher?

PAGE LOCATED HERE

Toute aide appréciée!

 

$(document).ready(function(){ 

       function initialize_slideCheck(){ 
        var slideCheck = $('.slideCheck'); 

        slideCheck.wrap(""); 
        slideCheck.after(""); 

        slideCheck.attr('style', 'display:block;'); 

        if(slideCheck.is(':checked')){ 
         $(this).next(".checkboxTrigger").css("left", "-8px"); 
        }else if(slideCheck.not(':checked')){ 
         $(this).next(".checkboxTrigger").css("left", "-40px"); 
        } 

       } 

       initialize_slideCheck(); 

       $(".checkboxTrigger").click(function(){ 

        var position = $(this).position().left; 

        if(position == -8){ 
         $(this).animate({"left": "-40px"}, 200); 
         $(this).prev('.slideCheck').attr('checked', ''); 
        } 
        else if(position == -40){ 
         $(this).animate({"left": "-8px"}, 200); 
         $(this).prev('.slideCheck').attr('checked', 'checked'); 
        } 

       }); 

      }); 
 

Answer 1

Cela devrait faire l'affaire. is() renvoie true si des éléments de l'ensemble correspondent au sélecteur. Dans ce cas, la condition ': checked' sera toujours eval à true.

function initialize_slideCheck() { 
    $('.slideCheck') 
     .wrap("<div class='checkboxWrapper rounded'></div>") 
     .after("<a class='checkboxTrigger' href='#'></a>") 
     .css({'display':'block'}) 
     .each(function(){ 
      var $this = $(this); 
      if ($this.is(':checked')) { 
       $this.nextAll('.checkboxTrigger').css({'left':'-8px'}); 
      } else { 
       $this.nextAll('.checkboxTrigger').css({'left':'-40px'}); 
      } 
     }) 
} 

EDIT:

En outre, votre gestionnaire de clic sur l'élément checkboxTrigger ne 'vérifier' correctement la case à cocher. Remplacer .attr('checked', '') avec .attr('checked', false)

Answer 2

next() sélectionne le frère suivant. Utilisez nextAll('selector') à la place. Vous pouvez consulter le manuel complet sur nextAll()here. La même chose arrive avec prev(). Utilisez prevAll() à la place. Vous pouvez lire ce manuel here.

Answer 3

Il est difficile de dire avec certitude sans voir le HTML, mais il me semble que le problème est avec vos appels de méthode $ (this) .next (...) dans la méthode initialize_slideCheck. À ce stade ce est le document, donc next() n'obtiendra pas l'élément à côté de slideCheck. Je pense que ce que vous essayez probablement de faire est:

function initialize_slideCheck(){ 
    ... 
    if(slideCheck.is(':checked')){ 
     slideCheck.next(".checkboxTrigger").css("left", "-8px"); 
    } else if(slideCheck.not(':checked')){ 
     slideCheck.next(".checkboxTrigger").css("left", "-40px"); 
    } 
} 

Notez le changement de $ (ce) .next à slideCheck.next.