4

jQuery と AJAX を使用して、div のコンテンツをサムネイル div のコンテンツに置き換えようとしています。現在、 、タグ、およびビデオh2にh3特定のスタイルを設定した注目のセクションがあります。p

h2サムネイルには、 、h3、タグ、およびビデオに関しては同じマークアップがありpますが、それぞれに固有の CSS スタイルがあります。

私が探しているのは、サムネイルの1つをクリックすると、機能セクションがサムネイルの情報に置き換えられ、機能セクションがサムネイル内に配置されます。

私はそれをいくらか始めましたが、実際に下のサムネイルのcssを変更しない限り、特定のサムネイルにクラスを削除して追加することはできないようです。

どんな助けでも大歓迎です。

現在の設定とこれまでの設定で jsfiddle を作成しました。

http://jsfiddle.net/drewbietron/YstAQ/

$(document).ready(function(){
   $("#one.promo-item").click(function(e){
       e.preventDefault();
       var content = $(this).html();
       $('.video-container-featured').replaceWith('<div class="video-container-promo" id="one">' +content+ '</div>'),
       $('#one.video-container-promo').addClass('.video-container-featured');
     });
 });

ありがとうございました！

4

1 に答える 1

1

一般に、やりたいことを実行するために、必要以上に多くのコードを持っています。簡単に考えて、子ノードが親から特異性を継承することを覚えておいてください。

あなたはこれを持っています：

<div class="promo-item" id="one">
    <div class="video-container-promo" id="one"><iframe src="#"></iframe></div>
    <h2>title...</h2>
    [...]

前述のとおり、重複した id を持つことはできません。しかし、できたとしても、ネストされたid="one"ものは完全に冗長です。でその要素をターゲットにし#one .video-container-promoます。同様に、css セレクターを で開始することにより、ネストされた子をターゲットにすることができます#one。(余談ですが、jQuery ではeq() メソッドを使用して数値インデックス付きのアイテムにアクセスできます。マークアップを乱雑にする必要はありません。)

HTML をクリーンアップすると、jQuery コードは基本的にワンライナーになります。1 つの div の内容をクリックされた div の内容と交換するには、次のようにします。

$('.source'​​​​​).click(function(){
    $('#target').children().replaceWith($(this).clone().children());
});

あなたの例に基づくターゲットは、おそらくIDである必要があります。その他の唯一の考慮事項は、使用している要素の階層が一致していることを確認することです。

これがどのように機能するかを示す簡単な jsfiddle を次に示します: http://jsfiddle.net/joemaller/qxUvp/

于 2012-12-02T14:52:48.163 に答える