0

サイトを作成している途中で、ちょっとした問題が発生しました。基本的に、私が扱っているのは、2 つの小さい画像と 1 つの大きい画像の 3 つの写真のコレクションです。私が望むのは、小さな写真の 1 つをクリックすると、大きな写真のスポットが表示されることです。これを正常に実行する JavaScript 関数がありますが、小さな問題が 1 つあります。これらの 3 つの写真のコレクションが 3 つあるため、小さな画像をクリックして大きな画像と交換すると、小さな画像は、そのセクションの 1 つだけではなく、3 つの大きな画像すべてのスポットを取得します。助言がありますか？ありがとう

JavaScript 関数

  $(document).ready(function(){
        $('img').click(function(){
        var url = $(this).attr('src');
        var bigUrl = $(this).parents('.picture-container').find('.large-picture > img').attr('src');
        $('.large-picture > img').attr('src', url);
        $(this).attr('src', bigUrl);
        });
        });

セクションの 1 つがどのように見えるか

 <div class = 'main-content'>
        <div class = 'picture-container'>
            <div class = 'large-picture' style = 'width:50%;height:100%;float:left;'>
                <img src = 'close_table_dupontstudios.png' width = '100%' height = '100%'>
            </div>
            <div class = 'picture-content' style = 'float:right;width:45%;height:100%;'>
                <div class='picture-title'>BOUTIQUE PRODUCTION STUDIO</div>
                <div class='picture-text'>We built a boutique full service production studio that allows for one, two and three person filmed interviews and conversations. We have studio lights, a three camera set-up and remote monitoring. Additionally, our Infinity Wall creates a clean and professional look that allows the film to be about the message.</div>
                <div class = 'small-picture-wrapper'>
                    <div class = 'small-picture' style = 'float:left;height:100%;'>
                        <img src = 'hair_and_makeup_dupontstudios.png' width = '100%' height = '100%'>
                    </div>
                    <div class = 'small-picture' style = 'float:right;height:100%;'>
                        <img src = 'infinity_wall_dupontstudios.png' width = '100%' height = '100%'>
                    </div>
                </div>
            </div>
        </div>
4

1 に答える 1

0

.large-picture新しいイメージ src を適用するためにクラス セレクターを選択するときに、クラス セレクターを使用しています。おそらく、3 つのセクションすべてにこのクラスの要素があり、3 つすべてが.large-pictureセレクターによって選択されていることを意味します。適切な要素のみを取得するには、より明示的なセレクターが必要です。

parents()ID を使用することも、以前のようにandfind()を組み合わせて使用​​することもできます。

$(this).parents('.picture-container').find('.large-picture > img').attr('src', url);
于 2013-07-15T01:29:18.460 に答える