0

ここに2つの画像を切り替える小さなスクリプトがあります...1番目を選択すると選択されたままになり、2番目を選択すると1番目がフェードアウトして2番目が選択されるように機能します...そのように単純です。

$(document).ready(function () {
    $(".theImage img").click(function () {
        var a = $(this).parent().attr("id") == "product-holder1" ? "product-holder2" : "product-holder1";
        console.log(a);
        $(this).fadeOut();
        $("#" + a + " img").fadeIn()
    })
})

私の問題は、2つ以上の画像にどのように使用すればよいかわからないことです。IDが「product-holder3」で、おそらく「product-holder4」であるとしましょう。これをjqueryコードに書き込むと、どちらが選択されているかが切り替わります。

HTML：

<div id="product-holder1" class="theImage">
  <img src="img/10-normal.png" />
</div>
<div id="product-holder2" class="theImage">
  <img src="img/25-normal.png" />
</div>
    <div id="product-holder3" class="theImage">
  <img src="img/50-normal.png" />
</div>

CSS

#product-holder1 {
    background: url("img/10-selected.png");
    background-repeat: no-repeat;
    height: 182px;
    width: 195px;
    position: absolute;
    top: 40px;
    left: 62px;
    cursor: pointer;
}
#product-holder2 {
    background: url("img/25-selected.png");
    background-repeat: no-repeat;
    height: 182px;
    width: 195px;
    position: absolute;
    top: 40px;
    left: 124px;
    cursor: pointer;
}
#product-holder3 {
    background: url("img/50-selected.png");
    background-repeat: no-repeat;
    height: 182px;
    width: 195px;
    position: absolute;
    top: 40px;
    left: 186x;
    cursor: pointer;
}

product-holder3での使用方法を教えてください。いつかもっと画像が必要になるかもしれませんが、それがどのように機能するか教えてください。どうもありがとう！

PS私はjQueryについて何も知りません：D

4

2 に答える 2

1

これは、以下のコメントでの議論に基づく更新です。

// Listen for the click event of our many containers
$(".theImage").on("click", function(){
   // In the event clicked, find image, fade slowly to .01 opacity
   $(this).find("img").fadeTo("slow",0).end()
     // Then, of siblings, find all images and fade slowly to 100% opacity
     .siblings().find("img").fadeTo("slow",1);           
});​

デモ： http： //jsfiddle.net/yvM8Z/2/

于 2012-05-25T18:34:46.657 に答える
0

循環しているコンテナdiv（または少なくともそれらのID）を含むコレクションを作成する必要があります。$(".theImage img:parent")サイクリングの順序を操作することを心配する必要がない場合のようなもの。次に、クリック関数で、ID fromを使用して現在のコレクション要素を検索し、その$(this).parent().attr("id")インデックスを取得できます。インデックスがわかったら、コレクション内の次のアイテムに移動して（または、最後にいる場合は最初に折り返して）、新しいIDを取得し、それを変数の値として設定しますa。

于 2012-05-25T18:28:41.293 に答える