jQuery在列表中追加内容

嗨，我在做一个项目，点击一个图像会生成一个关于点击图像的摘要。大约有50个图像可以点击。我想在列表中添加摘要，并对其进行过滤，这样如果我点击图像两次，就不会有多个附件

下面是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>");
 });
 ........

$（“#001”）。单击（函数（）{
this.t=this.title；
this.title=“”；
this.b=this.bigimage；
this.bigimage=“”；
$（“ul#summary”）。追加（“
”+this.t+”
”）；
});
$（“#002”）。单击（函数（）{
this.t=this.title；
this.title=“”；
this.b=this.bigimage；
this.bigimage=“”；
$（“ul#summary”）。追加（“
”+this.t+”
”）；
});
$（“#003”）。单击（函数（）{
this.t=this.title；
this.title=“”；
this.b=this.bigimage；
this.bigimage=“”；
$（“ul#summary”）。追加（“
”+this.t+”
”）；
});
........

---

它继续下去。。。有没有办法简化这些代码？如果是，我如何添加if和else语句来过滤内容是否已附加？

单击图像时，可以向图像中添加一个类，这样就可以设置一个条件以避免附加两次相同的信息。 您可以轻松地缩短代码：

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

$（'#图像集img'）。单击（函数（）{
if（！$（this）.hasClass（'clicked'））{
var id=$（this.attr（'id'）；
$（'ul#summary'）。追加（'li>'+this.title+'
'）；
$（this.addClass（'clicked'）；
}
});

另外，我认为以数字开头的ID是不允许的

---

编辑：

首先，不要使用以数字开头的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>");
   }
});

$（“#imageset.swatch”）。单击（函数（）{
this.t=this.title；
this.title=“”；
this.b=this.bigimage；
this.bigimage=“”；
if（$（'#sum'+this.id）.length==0）{
$（“ul#summary”）。追加（“
”+this.t+”
”）；
}
});

---

它所做的是，如果以前没有添加过摘要，它会检查DOM，然后添加它，否则它不会添加它。

如果您坚持不想使用AJAX请求从服务器获取更多可能存储的信息，则使用，然后，无论如何，您都必须将信息存储在页面的某个位置，尽管如果代码是自动生成的，那么您的生活就会变得更加轻松，您的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);
    }
});

$（'#图像集img'）。单击（函数（）{
//得到我们需要的一切。。。
var id=$（this.attr（'id'）；
var title=$（this.attr（'title'）；
var big_image=$（this.attr（'bigimage'）；
变量列表=$（“#摘要”）；
//检查列表项是否已存在。。。
var existing_item=$（'#list_item_'+id）；
如果（现有项目长度<1）
{
//创建新的列表项。。。
var new_item=$（“
”）；
新项目属性（'id'，'list\u item_uu'+id）；
new_item.html（“”+title+”
）；
//将其添加到列表中。。。
列表。追加（新的_项）；
}
});

---

我希望这有帮助，也有意义！：）

非常感谢这让我的生活更轻松了。我不熟悉jquery中的编码。您的代码已经简化，我想知道如何验证列表项。没问题！很高兴能帮忙！祝你好运，继续编码！：）