0

嗨，我正在从事一个项目，单击图像将生成有关单击图像的摘要。大约有 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 语句以过滤掉内容是否已附加？

4

3 回答 3

0

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

$('#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。

编辑： HTML 中 id 属性的有效值是什么？

于 2012-05-19T08:10:18.703 回答
0

首先不要使用以数字开头的 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-19T08:12:44.520 回答
0

如果您坚持不希望使用 AJAX 请求使用jQuery GET 请求之类的方式从服务器获取更多可能存储的信息，那么无论如何您都必须将信息存储在页面上的某个位置，尽管如果代码是自动生成的，那么您的生活确实会变得容易得多，并且您的 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-19T08:15:31.747 回答