Changer l'image sur la case à cocher Jquery

Question

Je construis un site qui donnera aux utilisateurs un aperçu de leur sélection (image). En l'état actuel, les deux fonctions individuelles fonctionnent, mais c'est un peu déroutant car, la case à cocher fait une chose, mais ils doivent cliquer sur l'image pour changer l'aperçu. Voici le code:

$(".checkbox_collar").change(function(){       
        $('.tile_collar').css('border', 'none'); 
        $(this).closest('td').find('.tile_collar').css('border', "solid 1px #FC810A"); 
       }); 
       $('.optionsTable').delegate('img','click', function(){ 
        $('#preview_image').attr('src',$(this).attr('src').replace('tile','preview')); 
       }); 

Je veux l'image d'aperçu (#preview_image) pour changer le changement de case à cocher (.checkbox_collar)

Voici ma tentative de solution, qui ne fonctionne pas (pour donner une meilleure idée de ce que je suis en train de faire:

$(".checkbox_<?=$tabOption?>").change(function(){      
        $('.tile_collar').css('border', 'none'); 
        $(this).closest('td').find('.tile_collar').css('border', "solid 1px #FC810A"); 
        $('#preview_image').attr('src',$(this).attr('src').replace('tile','preview')); 
       }); 

ci-dessus ne fonctionne pas ... est-il un moyen de lier les deux ensemble de sorte que lorsque l'utilisateur clique ... il ajoute la frontière? et change la photo dans $ preview_image?

Mieux encore, est-il possible d'avoir l'image de la case cocher la case si on clique dessus?

Par domand populaire (lol), j'ai ajouté som HTML; désolé pour tout inconvénient:

<table class="optionsTable" id="optionsTable"> 
          <tr> 
           <td><img src="img/option/tile/test.png" width="100px" class="tile_test" style="border: solid 1px #FC810A"> 
            <br> 
            <input class="checkbox" id="optionRadio" type="radio" name="test" value="1" checked="checked"> 
           </td> 

          </tr> 
          </table> 
        </div><!--option div--> 
        <div id="option_preview"> 

         <img src="img/option/preview/test.png" width="335px" alt="test"> 
         <div id="option_desc" class="option_desc">Edit</div> 

mise à jour est ici une mise à jour de mon code qui est la boîte à WOKR mais ne sera pas cocher la case à cocher:

<script type="text/javascript"> 
          $('#optionsTable_<?=$tabOption?>').delegate('img','click', function(){ 
           $('.tile_<?=$tabOption?>').css('border', 'none'); 
           $(this).closest('td').find('.tile_<?=$tabOption?>').css('border', "solid 1px #FC810A"); 
           $('#preview_<?=$optionSku?>').attr('src',$(this).attr('src').replace('tile','preview')); 
          }); 
         </script> 

Answer 1

je ferais quelque chose comme ceci:

$(".checkbox_collar").on('change', function(){ 
    var newSrc = $(this).attr('src').replace('tile','preview'); 
    $('#preview_image').attr('src', newSrc); 

    $(this).next('td').find('.tile_collar').css('border', '1px solid red'); 
}); 

Mais l'exemple devrait montrer du HTML.

Très bien, je pense que je comprends ce que vous essayez de faire. Découvrez ce violon.

http://jsfiddle.net/kDeFQ/

J'ai nettoyé votre mise en œuvre. Cela semble fonctionner, mais vous devrez peut-être jouer avec la méthode de remplacement. En outre, j'ai supprimé vos sélecteurs funky, vous pourriez essayer de les remettre. Vous devriez probablement décomposer ceci en parties discrètes. L'événement onChange doit appeler sa propre méthode. Bonne chance!

<div> 
    <table class="optionsTable" id="optionsTable"> 
     <tr> 
      <td> 
       <img src="/img/oneimage.gif" width="100px" class="tile_test" style="border: solid 1px #FC810A"> 
       <input class="checkbox" id="optionRadio" type="checkbox" name="test" value="1"> 
      </td> 
     </tr> 
    </table> 
</div><!--option div--> 

<div id="option_preview"> 
    <img src="/img/otherimage.png" width="335px" alt="test"> 
    <div id="option_desc" class="option_desc">Edit</div> 
</div> 


<script> 
    $('#optionsTable input.checkbox').on('change', function(){ 
     var name = $(this).attr('name'); 
     $('.tile_'+ name).css('border', 'none'); 
     $(this).prev('td').find('.tile_' + name).css('border', "solid 1px #FC810A"); 

     //now get src 
     var source = $(this).prev('img').attr('src'); 
      source = source.replace('title', 'preview'); 
     console.log(source); 
     $('#option_preview img').attr('src', source); 
    }); 
</script>