jQuery在列表中添加內容

嗨我正在開發一個項目，點擊圖片後會生成關於點擊圖片的摘要。大約有50個圖像可以點擊。我想在列表中添加摘要，我想過濾它，所以如果我點擊圖像兩次，不會有多個附加。jQuery在列表中添加內容

下面是HTML

<div id="imageset"> 
     <img id="001" class="swatch" src="1.jpg" title="swatch 1" bigimage="1b.jpg"/> 
     <img id="002" class="swatch" src="2.jpg" title="swatch 2" bigimage="2b.jpg"/> 
     <img id="003" class="swatch" src="3.jpg" title="swatch 3" bigimage="3b.jpg"/> 
     <img id="004" class="swatch" src="4.jpg" title="swatch 4" bigimage="4b.jpg"/> 
     .... 
    </div> 
    <ul id="summary"> 
    </ul>

下面的代碼是jQuery代碼

$("#001").click(function(){ 
    this.t = this.title; 
    this.title = ""; 
    this.b = this.bigimage; 
    this.bigimage = ""; 
    $("ul#summary").append("<li><div id='t001'>"+this.t+"</div></br><img id='b001' src="+this.b+"/></li>"); 
}); 
$("#002").click(function(){ 
    this.t = this.title; 
    this.title = ""; 
    this.b = this.bigimage; 
    this.bigimage = ""; 
    $("ul#summary").append("<li><div id='t002'>"+this.t+"</div></br><img id='b002' src="+this.b+"/></li>"); 
}); 
$("#003").click(function(){ 
    this.t = this.title; 
    this.title = ""; 
    this.b = this.bigimage; 
    this.bigimage = ""; 
    $("ul#summary").append("<li><div id='t003'>"+this.t+"</div></br><img id='b003' src="+this.b+"/></li>"); 
}); 
........

，它的推移和對...有沒有一種方法來簡化這些代碼？如果是的話，我如何添加一個if和else語句來過濾掉內容是否已被添加？

來源

2012-05-19 Solomon Sam

如果你堅持認爲你不希望使用AJAX請求獲取的使用有點像jQuery GET request服務器可能存儲的信息的更大的財富，那麼你就必須存儲信息某處無論如何，儘管如果代碼是自動生成的，那麼你的生活會變得更容易，並且你的jQuery代碼（至少！）可以大大簡化！

使用現有上面的HTML代碼，請考慮以下的jQuery代碼：

$('#imageset img').click(function(){ 

    // get everything we need... 
    var id = $(this).attr('id'); 
    var title = $(this).attr('title'); 
    var big_image = $(this).attr('bigimage'); 
    var list = $('#summary'); 

    // check to see if the list item already exists... 
    var existing_item = $('#list_item_' + id); 
    if (existing_item.length < 1) 
    { 
     // create the new list item... 
     var new_item = $('<li />'); 
     new_item.attr('id', 'list_item_' + id); 
     new_item.html('<div>' + title + '</div><br /><img src="' + big_image + '" />'); 

     // add it to the list... 
     list.append(new_item); 
    } 
});

我希望這有助於和有意義！ :)

來源

2012-05-19 08:15:31

非常感謝，這讓我的生活更輕鬆。林新編碼在jQuery中。您的代碼已經過簡化，並且認爲我如何驗證列表項目。 –

沒問題！很高興有幫助！祝你好運，並保持編碼！ :) –

您可以在點擊圖像時添加一個類，這樣您可以創建一個條件以避免追加兩次相同的信息。你可以很容易使你的代碼更短：

$('#imageset img').click(function(){ 
    if(!$(this).hasClass('clicked')){ 
     var id = $(this).attr('id'); 
     $('ul#summary').append('<li><div id="t' + id + '">'+this.title+'</div></br><img id="b' + id + 'src="+this.bigimage+"/></li>'); 
     $(this).addClass('clicked'); 
    } 
});

另外，我認爲IDS開始與一些是不允許的。

編輯：What are valid values for the id attribute in HTML?

來源

2012-05-19 08:10:18 romainberger

首先不要使用以數字開頭的ID，一些瀏覽器將有一個問題，它不是有效的HTML。

我會編寫JavaScript這樣的：

$("#imageset .swatch").click(function(){ 
    this.t = this.title; 
    this.title = ""; 
    this.b = this.bigimage; 
    this.bigimage = ""; 
    if ($('#sum_' + this.id).length === 0) { 
     $("ul#summary").append("<li><div id='sum_" + this.id + "'>"+this.t+"</div></br><img id='img_" + this.id + "' src="+this.b+"/></li>"); 
    } 
});

它所做的是，它會檢查DOM如果總結以前尚未添加，然後將它，否則它不會添加它。

來源

2012-05-19 08:12:44 albin

jQuery在列表中添加內容

回答

相關問題