0

こんにちは私は、画像をクリックするとクリックされた画像に関する要約が生成されるプロジェクトに取り組んでいます。クリックできる画像は約50枚あります。要約をリストに追加し、画像を2回クリックしても複数の追加がないようにフィルタリングしたいのですが、

これが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 and elseステートメントを追加するにはどうすればよいですか？

4

3 に答える 3

0

クリックすると画像にクラスを追加できるので、同じ情報を2回追加しないように条件を設定できます。また、コードを簡単に短くすることができます。

$('#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 に答える