需要說明的jQuery代碼

-1

有人能爲我解釋一下腳本這一行的結構嗎？此處的另一位用戶已將其寫入爲我知道要編輯並更改爲在我的網站其他地方使用的功能的一部分。需要說明的jQuery代碼

$('#main_content .img-wrapper').empty().append($(this).find('img').clone());

這其中需要將圖像從一個DIV，並將其複製到另一個階級=「IMG-包裝」

我想要做的完全一樣的，但用的文字。我試過

$('#main_content .text-wrapper').empty().append($(this).find('.info').clone());

其中（'.info'）是我想要複製的div的類名。它不工作。

我不完全理解的語法，因爲這是使用JavaScript我的第一天。請有人解釋我要去哪裏錯了嗎？

這是HTML - 有四種不同的圖像，當在每個圖像的用戶點擊我想它加載相同的圖像和相關文本的主要內容股利

<div class="row"> 
<div class="card-container"> 
    <div class="card"> 
    <div class="back"> 
     <img src="images1.png" /> 
     <div class="info" style="display: none;">This is a test for image one</div> 
    </div> 
    <div class="front" style="background-color:#cc99cc;"></div> 
    </div> 
</div> 

<div class="card-container"> 
    <div class="card"> 
    <div class="back"> 
     <img src="images2.png" /> 
     <div class="info" style="display: none;">This is a test for image one</div> 
    </div> 
    <div class="front" style="background-color:#9966cc;"></div> 
    </div> 
</div> 

<div class="card-container"> 
    <div class="card"> 
    <div class="back"> 
     <img src="images3.png" /> 
     <div class="info" style="display: none;">This is a test for image one</div> 
    </div> 
    <div class="front" style="background-color:#6666cc;"></div> 
    </div> 
</div> 

<div class="card-container"> 
    <div class="card"> 
    <div class="back"> 
     <img src="images4.png" /> 
     <div class="info" style="display: none;">This is a test for image one</div> 
    </div> 
    <div class="front" style="background-color:#3366cc;"></div> 
    </div> 
</div>

這是主要的內容DIV

<div id="main_content"> 
    <!-- main content --> 
    <div class="img-wrapper"> 
    </div> 
    <div class="text-wrapper"> 
    </div> 
</div>

來源

2011-11-03 Sam Corbet

這就是jQuery .. –

發佈相關的HTML。 – 2011-11-03 16:48:25

@Rob W「jQuery是......」哦，嗯 – 2011-11-03 16:49:07

試試這個：

$('#main_content .text-wrapper').empty().append($(this).find('.info').html());

來源

2011-11-03 16:54:28

謝謝，完美的作品。這是網站www.samueljamesdesign.com 我做自由職業的打印設計，並認爲這是關於我的時間我有一個網站爲我的投資組合這是一個不好的方式實現我試圖實現什麼？該網站目前只適用於Chrome和Safari，我會固定毛刺一次我的知識擴展......很新的網頁設計千恩萬謝山姆 –

沒有看到HTML結構，我的猜測是在你試圖找到.info是不正確的上下文。

我假設的代碼塊是像點擊鼠標懸停或什麼事件處理程序中。在這種情況下，$(this)指的是觸發該事件的元素。所以下面的代碼片斷：

$(this).find('.info')

正在尋找與info內一類名的元件由$(this)稱爲元素。

確保上下文是正確的 - 改變$(this)到你需要進行搜索的元素。

來源

2011-11-03 16:54:38 swatkins

嗨Swatkins，這是正確的類名是內元素我指的是。下面的Emre答案工作，但是新的我不確定爲什麼這是這種情況 –

'clone（）'方法創建一個元素的副本，所以當你需要在其他地方放置圖像時，這就是你要使用的。 'html（）'方法將獲取**元素內的html代碼**，所以如果你想將文本移動到其他地方，那就是你要使用的。 – swatkins

有問題的JavaScript是使用jQuery。

$('#main_content .img-wrapper')

返回元素（S）與ID爲 'main_content'

.empty()

清空該元素的元素中類 'IMG-包裝'（刪除所有它的HTML內容）

.append(

將參數（接下來來的位）插入此元素

 $(this).find('img')

發現通過this提到的元件之內的所有「IMG」標記（即如果這是從.click()處理，然後被點擊的元素）

 .clone()

克隆觸發這些元素，以便有兩個版本 - 一個在原來的位置，一個被插入到#main_content img-wrapper元素。

);

您確定擁有#main_content .text-wrapper元素嗎？

來源

2011-11-03 16:54:55 Benjie

謝謝你的解釋。它非常清晰，幫助我理解得更好:) –

需要說明的jQuery代碼

回答

相關問題