http://feathertest.me.pn/test.php 上記のURLは、作業しているウェブサイトへのリンクです。私は下のサムネイルをクリックすると、拡大したバージョンは、上記の大きなボックスに表示されますJQueryで複数の画像を切り替える際の問題
:
iは、2つの主要な特徴を持っています。私はこのために使用されるコードは次のとおりです。右側に
$(function(){ $(".thumb").click(function(){ var imagesrc = $(this).children().prop('src'); $('.bigImg').attr('src', imagesrc); }); });
私が利用可能な色を描いた小さな正方形のタイルを持っています。各色をクリックすると、左側のほうき画像が選択色を表示するように変わります。私はそれを使用したコードは次のとおりです。
<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>
を助けてください。
ありがとうございます
サムネイルのそれぞれに、選択したインデックスの種類を記録できる属性を追加します。位置属性(例:「」)と同様に、クリックするとその位置で現在選択されているアイテムを把握できます。次に、別の色をクリックすると、現在のインデックスを確認し、他の色の対応するイメージを選択します。 –
@JoshuaTerrill JqueryとJavascriptでは問題はあまりよくありません。だから私は静かではないことを確認する方法。 –
ここに私が意味するものの例があります:https://jsfiddle.net/v81dk4dp/1/それはインデックスと色を追跡するものです。それぞれの画像をクリックするだけでなく、紫色または黄色のテキストをクリックすると、クリックするたびに同等の画像に切り替わります。レイCの例よりも複雑で、少し不思議です。彼はまた、IDについて良い点を挙げました。 IDはユニークであることを意図しています。クラスは必須ではありません。 –