jQuery image src changer par bouton radio

J'ai ce code mais pourquoi quand je clique sur un bouton radio l'image src ne change pas?jQuery image src changer par bouton radio

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Toggle Images using RadioButtons</title>
 <script type="text/javascript"
 src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js">
 </script>
 <script type="text/javascript">
  $(document).ready(function() {
   $("input:radio[name=style]").change(function() {
    if (this.value == "tuxedo"){
      var style = 'tuxedo';
    } else {
      var style = 'classic' ;     
    }
   });
   $("input:radio[name=breast]").change(function() {
    if (this.value == "double"){
      var breast = 'double';
    } else {
      var breast = 'single' ;     
    }
   });
   $("input:radio[name=buttons]").change(function() {
   if (this.value == "4"){
      var buttons = '4';
   } else if (this.value == "3"){
      var buttons = '3';
   } else if (this.value == "2"){
      var buttons = '2';
    } else {
      var buttons = '1' ;     
    }
   });
  
       $("#imgDef").attr(
      'src', 'http://127.0.0.1/2/suits/'+ style +'/'+ breast +'/'+ buttons +'.jpg'     
     );
  });
 </script>
</head>
<body>
Style:<br />
<label><input name="style" type="radio" value="classic" />Classic</label><br />
<label><input name="style" type="radio" value="tuxedo" />Tuxedo</label><br />
<br /><br />
Breast:<br />
<label><input name="breast" type="radio" value="single" />Single</label><br />
<label><input name="breast" type="radio" value="double" />Double</label><br />
Buttons:<br />
<label><input name="buttons" type="radio" value="1" />1</label><br />
<label><input name="buttons" type="radio" value="2" />2</label><br />
<label><input name="buttons" type="radio" value="3" />3</label><br />
<label><input name="buttons" type="radio" value="4" />4</label><br />
<img id="imgDef" src="http://127.0.0.1/2/suits/classic/single/1.jpg"/>
</body>
</html>

Source

2013-02-25 TzoLy

'style',' buttons', et 'breast 'sont tous hors de portée lorsque vous mettez à jour l'attribut' src'. Déclarez-les dans la même portée que '$ (" # imgDef "). Attr()' et cela devrait fonctionner. – jrummell

Voici un exemple de travail complet. http://jsfiddle.net/whizkid747/FsSz6/ si vous voulez changer l'image src que lorsque toutes les 3 sections sont sélectionnées, vous devrez peut-être ajouter un chèque non défini à chaque variable avant de l'img src

var style,breast,buttons; 

$("input:radio[name=style]").change(function() { 

       if (this.value == "tuxedo"){ 
         style = 'tuxedo'; 
       } else { 
         style = 'classic' ;     
       } 
    loadImage(); 
      }); 
      $("input:radio[name=breast]").change(function() { 
       if (this.value == "double"){ 
         breast = 'double'; 
       } else { 
         breast = 'single' ;     
       } 
       loadImage(); 
      }); 
      $("input:radio[name=buttons]").change(function() { 
      if (this.value == "4"){ 
         buttons = '4'; 
      } else if (this.value == "3"){ 
         buttons = '3'; 
      } else if (this.value == "2"){ 
         buttons = '2'; 
       } else { 
         buttons = '1' ;     
       } 
       loadImage(); 
      }); 
function loadImage(){ 
    alert('http://127.0.0.1/2/suits/'+ style +'/'+ breast +'/'+ buttons +'.jpg'); 
          $("#imgDef").attr(
         'src', 'http://127.0.0.1/2/suits/'+ style +'/'+ breast +'/'+ buttons +'.jpg'     
        ); 
}

Source

2013-02-25 13:34:21 Whizkid747

Merci! Cela a fonctionné très bien! – TzoLy

$("input:radio[name=buttons]").change(function() { 
       var buttons; 

       if (this.value == "4"){ 
          buttons = '4'; 
       } else if (this.value == "3"){ 
          buttons = '3'; 
       } else if (this.value == "2"){ 
          buttons = '2'; 
        } else { 
          buttons = '1' ;     
        } 
       });

comme this..hope déclare cela fonctionne pour vous ..

vous mieux pour obtenir la valeur du bouton radio vérifiée comme celui-ci

$('input:radio[name=buttons]:checked').val();

Source

2013-02-25 13:24:07 sasi

Vous Définissez le style, la poitrine et les boutons de chaque fonction liée à l'événement .change dans vos champs de saisie. Ils ne seront pas accessibles en dehors de ces fonctions. Déclarez-les en dehors de vos fonctions, puis placez-les dans vos fonctions de changement d'entrée.

à savoir

$(document).ready(function() { 
    var style, breast, buttons; 
     $("input:radio[name=style]").change(function() { 
      if (this.value == "tuxedo"){

Source

2013-02-25 13:24:45 lparry

ne fonctionne toujours pas :( – TzoLy

Déclarez vos variables au début de votre gestionnaire "prêt": $(document).ready(function() { var style; var breast; var buttons; ...
Ne pas utiliser var dans les instructions conditionnelles. Réglez simplement la valeur: if (this.value == "tuxedo"){ style = 'tuxedo'; ....
Appelez le code qui modifie l'attribut src à la fin de vos gestionnaires de "changement". Vous devez l'appeler trois fois.

Source

2013-02-25 13:28:25

jQuery image src changer par bouton radio

Répondre

Questions connexes