2016-12-24 7 views
1

http://feathertest.me.pn/test.php 上記のURLは、作業しているウェブサイトへのリンクです。私は下のサムネイルをクリックすると、拡大したバージョンは、上記の大きなボックスに表示されますJQueryで複数の画像を切り替える際の問題

  1. iは、2つの主要な特徴を持っています。私はこのために使用されるコードは次のとおりです。右側に

    $(function(){ 
        $(".thumb").click(function(){ 
         var imagesrc = $(this).children().prop('src'); 
         $('.bigImg').attr('src', imagesrc); 
        }); 
    }); 
    
  2. 私が利用可能な色を描いた小さな正方形のタイルを持っています。各色をクリックすると、左側のほうき画像が選択色を表示するように変わります。私はそれを使用したコードは次のとおりです。

    <script type="text/javascript"> 
        $(function() { 
         $('#showdiv1').click(function() { 
          $('div[id^=div]').hide(); 
          $('#div1').show(); 
         }); 
         $('#showdiv2').click(function() { 
          $('div[id^=div]').hide(); 
          $('#div2').show(); 
         }); 
    
        $('#showdiv3').click(function() { 
         $('div[id^=div]').hide(); 
         $('#div3').show(); 
        }); 
    
        $('#showdiv4').click(function() { 
         $('div[id^=div]').hide(); 
         $('#div4').show(); 
        }); 
    }) 
    

私の問題:私はサムネイルのいずれかをクリックした後 (画像のバージョンが正常に上記の大きな箱に表示される拡大します)カラータイルの1つをクリックすると、サムネイルの画像だけがうまく変化しますが、大きなボックスの画像は前の色の最後にクリックされた画像になります。私はそのイメージを選択された色にも変えたい。

私のHTMLコードスニペット(私は2色のみのコードを表示しました):

<div id="feather-prods" class="row"> 
       <div id="div1"> 
       <div id="prod-stop" class="col-md-5 col-sm-6 col-xs-8 col-xs-push-2 col-sm-push-1 col-md-push-1"> 
        <div class="prod-img"><img id="tab1show" class="tab-content bigImg" src="images/broom/monara-pp-1.jpg" alt="feather, Purple monara broom"></div> 

        <div class="thumbnailImg"> 
         <div id="tab1show" class="tab-content thumb"><img src="images/broom/monara-pp-1.jpg" alt="feather, Purple monara broom" border="0" width="100%" class="thumbImg" /></div> 
         <div id="tab1show" class="tab-content thumb"><img src="images/broom/monara-pp-2.jpg" alt="feather, Purple monara broom" border="0" width="100%" class="thumbImg" /></div> 
         <div id="tab1show" class="tab-content thumb"><img src="images/broom/monara-pp-3.jpg" alt="feather, Purple monara broom" border="0" width="100%" class="thumbImg" /></div> 
         <div id="tab1show" class="tab-content thumb"><img src="images/broom/monara-pp-4.jpg" alt="feather, Purple monara broom" border="0" width="100%" class="thumbImg" /></div> 
        </div> 
       </div> 
       </div> 

       <div id="div2" style="display:none;" > 
       <div id="prod-stop" class="col-md-5 col-sm-6 col-xs-8 col-xs-push-2 col-sm-push-1 col-md-push-1"> 
        <div class="prod-img"><img id="tab2show" class="tab-content bigImg" src="images/broom/monara-b-1.jpg" alt="feather, black monara broom"></div> 

        <div class="thumbnailImg"> 
         <div id="tab2show" class="tab-content thumb"><img src="images/broom/monara-b-1.jpg" alt="feather, black monara broom" border="0" width="100%" class="thumbImg" /></div> 
         <div id="tab2show" class="tab-content thumb"><img src="images/broom/monara-b-2.jpg" alt="feather, black monara broom" border="0" width="100%" class="thumbImg" /></div> 
         <div id="tab2show" class="tab-content thumb"><img src="images/broom/monara-b-3.jpg" alt="feather, black monara broom" border="0" width="100%" class="thumbImg" /></div> 
         <div id="tab2show" class="tab-content thumb"><img src="images/broom/monara-b-4.jpg" alt="feather, black monara broom" border="0" width="100%" class="thumbImg" /></div> 
        </div> 
       </div><!-- prod images end --> 
       </div> 
</div> 

を助けてください。
ありがとうございます

+0

サムネイルのそれぞれに、選択したインデックスの種類を記録できる属性を追加します。位置属性(例:「」)と同様に、クリックするとその位置で現在選択されているアイテムを把握できます。次に、別の色をクリックすると、現在のインデックスを確認し、他の色の対応するイメージを選択します。 –

+0

@JoshuaTerrill JqueryとJavascriptでは問題はあまりよくありません。だから私は静かではないことを確認する方法。 –

+0

ここに私が意味するものの例があります:https://jsfiddle.net/v81dk4dp/1/それはインデックスと色を追跡するものです。それぞれの画像をクリックするだけでなく、紫色または黄色のテキストをクリックすると、クリックするたびに同等の画像に切り替わります。レイCの例よりも複雑で、少し不思議です。彼はまた、IDについて良い点を挙げました。 IDはユニークであることを意図しています。クラスは必須ではありません。 –

答えて

1

これは、サムネイルクリックイベントがうまく生成されないためです。 あなたは道を、次の中bgimage srcを設定します。

$('.bigImg').attr('src', imagesrc); 

と上記のコードは、実際には、ドキュメント内のすべての.bigImg要素にimagesrcを設定します。したがって、他のdivに切り替えても、最後にクリックされた画像が表示されます。それだけで、以下のように、特定の.bigImgを更新するように

、サムネイルクリックハンドラを更新してください:

また、私はあなたがすべてのdiv要素のためのIDとして prod-stopを割り当てた見て、私は、それを言う
$(function(){ 
    $(".thumb").click(function(){ 
     var imagesrc = $(this).children().prop('src'); 
     $('.bigImg', $(this).parent().parent()).attr('src', imagesrc); 
    }); 
}); 

同じidを複数の要素に与えるのは良い考えではありません。クラス名に変更したり、固有のIDにしたりする方がよいでしょう。

+0

それは働いた!本当にありがとう。そしてチップのおかげで。私は色を変更するたびにページをスクロールするのを避けるために使いました---> test.php#prod-stop –

+1

これはもっとも推奨されるテクニックであるかどうかわかりません:P –

+0

@HazraHameedよくあります。私があなたのところにいたなら、私はカラーオプションdivのための4つのクリックハンドラーを作っていません。各カラーピッカーにカスタム属性を割り当てて、ワンクリックハンドラを作成し、属性値に基づいてそれに応じて何かを行うことができます。 – Codemole

関連する問題