使用jQuery和AJAX交換Div內容和CSS

我想用jQuery & AJAX用縮略圖div的內容替換div的內容。現在我有一個特色部分，它有h2，h3和p標籤以及其視頻的特定樣式。使用jQuery和AJAX交換Div內容和CSS

該縮略圖有相同的標記儘可能h2,h3,p標籤和一個視頻，但每個具有自己的特定CSS樣式。

我想要做的是點擊其中一個縮略圖，它會用縮略圖的信息替換功能部分，然後將精選部分放在縮略圖中。

我有點開始，但我似乎無法刪除並添加類到特定的縮略圖，而實際上並沒有改變下面的縮略圖的CSS。

任何幫助將不勝感激。

我已經創建了一個jsfiddle與我目前的設置和我到目前爲止。

$(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'); 
    }); 
});

謝謝！

來源

2012-11-30 Drew Templeton

嗨，我已經編輯你的問題的標題。普遍的共識是，標籤（例如'jquery'和'ajax'）不需要在你的標題中，因爲它們上面的標籤會設置上下文。好的問題，否則。 – tmesser

您好像多次使用您的ID。 ID必須是唯一的。這可能會導致您的問題。 – Kyle

我從來沒有在我的CSS或我的Javascript中定位個人ID。即使id =「one」在我的css中多次使用，它僅在特定的類上使用一次。 –

一般來說，你已經得到了比你需要的更多的代碼，去做你想做的事情。簡單地想一想，並記住，子節點繼承父母的特異性。

你有這樣的：

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

如上所述，you can't have duplicate ids。但即使你可以，嵌套id="one"是完全多餘的。您將以#one .video-container-promo爲目標。同樣，你可以通過#one開始你的css選擇器來定位任何嵌套的孩子。（順便說一句，數字索引的項目可以在jQuery中使用eq()method，不需要混亂你的標記。）

一旦你清理了你的html，你的jQuery代碼基本上可以成爲一個單行代碼。換出一個div的內容與點擊div的內容，只是這樣做：

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

目標，根據您的例子也許應該是一個id。唯一的另一個考慮是要確保你所徘徊的元素都是匹配的。

這裏是展示如何這可能運行的一個簡單的jsfiddle：http://jsfiddle.net/joemaller/qxUvp/

來源

2012-12-02 14:52:48 joemaller

使用jQuery和AJAX交換Div內容和CSS

回答

相關問題