0

必要なものをよりよく説明するために、ここに例をアップロードしました。

3 つの div があり、いずれかをクリックすると、右側に同じ画像メニューが表示されます。私が今持っているのは、最初のdivをクリックしてからメニューに移動し、画像を選択.prepend()して、クリックしたdivにその画像を表示するために使用します。しかし、2 番目または 3 番目の div をクリックして色を選択したときに画像メニューが表示された場合、これは最初の div に表示されたままです。

簡略化された HTML は次のようなものです。

<div id="tela1"><img src="img/blank.jpg" /></div>
<div id="title_tela1"></div>
<div id="tela2"><img src="img/blank.jpg" /></div>
<div id="title_tela2"></div>

<div id="tela1_options">
    <div class="image_carousel1>
        Content goes here...
    </div>
</div>
<div id="tela2_options">
    <div class="image_carousel2>
        Content goes here...
    </div>
</div>

そしてJS：

$('.carousel_image1 img').click(function () {
    var imageName = $(this).attr('alt');
    var chopped = imageName.split('.');
    $('#title_tela1').empty();
    $('#title_tela1')
        .prepend(chopped[0]);
    $img = $(this);
    $('#tela1 img').attr('src', $img.attr('src'));
})

('#tela1_options .carousel_image1 img')3 つの div ごとにセレクターを使用してみましたが、画像を選択すると、最初の div にのみ表示されます。

誰かが見て、これを理解するのを手伝ってもらえますか?

4

1 に答える 1

0

カルーセルのクリック機能の内部には、「#tela1」がハードコーディングされています。その部分は、クリックされた div に基づいて動的にする必要があります。クリックされた div を、クリック関数内で使用される変数に保存することをお勧めします。document.ready 関数がどのように見えるかのサンプルを次に示します。

$(function(){
    var clickedDiv = null;

    $(".tela").click(function(){
        clickedDiv = $(this);
    });

    $('.carousel_image1 img').click(function () {
        var $img = $(this),
            imageName = $img.attr('alt'),
            chopped = imageName.split('.');

        clickedDiv.next().text(chopped[0]);
        clickedDiv.find('img').attr('src', $img.attr('src'));
    });
});

これを機能させるには、class="tela" を div に追加する必要があります。

<div id="tela1" class="tela"><img src="img/blank.jpg" /></div>
<div id="title_tela1"></div>
<div id="tela2" class="tela"><img src="img/blank.jpg" /></div>
<div id="title_tela2"></div>

jsFiddle の実際の例を次に示します: http://jsfiddle.net/jY4qa/2/ 最初のカルーセルに表示される画像のみを設定しました。ただし、空白の div の 1 つをクリックしてから画像をクリックすると、正しく設定されます。私の例では、JS の画像カルーセル セレクターも更新する必要がありました。

于 2011-10-19T18:29:00.237 に答える