Question

您正在开展一个项目，点击图片会生成有关所点击图片的摘要。有大约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>");
 });
 ........

它一直在继续......有没有办法简化这些代码？如果是这样，我如何添加if和else语句来过滤掉内容是否已经附加？

Answer 1

您可以在单击图像时为图像添加一个类，这样您就可以创建一个条件以避免添加两次相同的信息。而且您可以轻松地缩短代码：

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

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

编辑： What are valid values for the id attribute in HTML?

Answer 2

首先不要使用以数字开头的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，然后添加它，否则它不会添加它。

Answer 3

如果您坚持不想使用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);
    }
});

我希望这有帮助并且有意义！：）

jQuery在列表中追加内容

3 个答案: