Question

以下问题：

我想用jQuery构建一个小剪贴板。我曾多次尝试使用$（object）.data（'id'，objectToStore）将对象存储在javascript对象的数据中。对象可以存储在那里工作正常。问题是如果我尝试插入存储的数据，我只获得对该对象的引用。因此，当我编辑一个副本时，其他副本也会被更改。我需要一种方法将html代码复制到全局变量中，然后从存储的代码中单独插入代码。希望你们明白我的问题！ THX！

这里是代码：

对象

 /**
  * Objectdefinition
  */
 Clipboard = {

    //PROPERTIES
        itemcount: 0,           
        maxItems:10,            

        //Templates
        tplClipboard:"<div id='GUI_clipboard'><a href='' title='clear&nbsp;clipboard' id='GUI_clipboardClose' class='gritter-close'></a><ul></ul></div>",
        tplItem:"<li><a href='' class='[[type]] clipboardItem' id='[[id]]'><span class='hidden'>[[text]]</span></a></li>",
        tplItemHover:"<div class='GUI_clipboard_itemhover' style='width:[[offsetW]]px;height:[[offsetH]]px'><a href='' title='delete&nbsp;container' class='GUI_containerDelete'><span class='hidden'>Delete</span></a></div>",

        //Clipboarditem
        item:{
            id:null,
            type:null,
            content:'',
            offsetWidth:0,
            offsetHeight:0
        },

    //FUNCTIONS
        addItem:function(id,type,text,content,offsetH,offsetW){
            if(this.itemcount>=this.maxItems){
                return $.gritter.add({
                    title:'Clipboard',
                    text:'You cannot store more than '+ this.maxItems +' Elements!',
                    image:'warning',
                });
            }


            var item = {};
                item.id=id,
                item.type=type,
                item.content=content,
                item.offsetHeight=offsetH,
                item.offsetWidth= offsetW;


            this.verify();


            if (!this.checkRed(id)) {


                this.itemcount++;


                var tmp = this.tplItem;


                tmp = this.str_replace(['[[type]]', '[[id]]', '[[text]]'], [type, id, text], tmp);

                $('#GUI_clipboard ul').append(tmp);
                var $item = $('a#'+id);
                var number = this.itemcount;
                $item.hide().fadeIn('slow',function(){

                    Clipboard.redraw();
                });


                this.saveItem(item);


                var config = {
                    over:function(){Clipboard.hoveringItem($('a',this))},
                    out:function(){Clipboard.unhoveringItem($('a',this))},
                    timeout:1
                };
                $item.parent().hoverIntent(config);


                $item.draggable({
                    connectToSortable:'.column',                        
                    helper:'clone',                                     
                    revert:'invalid',                                   
                    cursor:'move',                                      //Cursor
                    start:function(){
                        $('body').unbind('mouseover',Content.showContainerMenu);
                        $('body').unbind('mouseout',Content.hideContainerMenu);
                        $('#GUI_clipboard li').trigger('mouseout');
                    },
                    stop:function(){
                        $('body').bind('mouseover',Content.showContainerMenu);
                        $('body').bind('mouseout',Content.hideContainerMenu);
                    }
                });
            }else{

                $('#'+id,'#GUI_clipboard').effect("bounce", { times:3 }, 300);
            }
        },


        saveItem:function(item){            
            $(this).data(item.id,item);
        },


        removeItem: function(id){
            $('#GUI_clipbaord').data(id,null);
            $('a[id='+id+']','#GUI_clipboard').parent().slideUp('slow',function(){$(this).remove()});
            this.itemcount--;

            if(this.itemcount==0)this.remove();
        },


        verify:function(){
            if($('#GUI_clipboard').length == 0){
                $('body').append(this.tplClipboard);                     

                $('#GUI_clipboard')                         
                    .css({
                        top:$(window).height()/2+'px'                       
                    })
                    .animate({                                          
                        left:0
                    }).children('.gritter-close').capture({cssClass:'GUI_clipboardClose'});     
            }
        },


        checkRed:function(id){
            if($('a[id='+id+']').length==0)return false;
            else return true;
        },


        remove:function(){
            $('#GUI_clipboard').animate({                                               
                left:'-60px'
            },function(){
                $(this).remove();
            });
            this.itemcount=0;
        },


        hoveringItem:function(el){

            var item = $(this).data($(el).attr('id')),
                content=item.content,
                oH=item.offsetHeight,
                oW=item.offsetWidth,


            tmp = this.tplItemHover;                
            tmp = this.str_replace(['[[offsetW]]', '[[offsetH]]'], [oW,oH], tmp);


            $(el).after(tmp);
            var $element = $('.GUI_clipboard_itemhover').append(content).prepend("<div class='GUI_clipboardArrow'></div>");


            $element.position({ my: 'left center', at: 'right center', of: $(el),offset:'14 0',collision:'none fit'});
            $('.GUI_clipboardArrow',$element).position({ my: 'left center', at: 'right center', of: $(el),offset:'-2 0',collision:'none fit'});


            $('#'+item.id,'#GUI_clipboard').removeClass('borderContainer editable');


            $('a.GUI_containerDelete',$element).click(function(){
                Clipboard.removeItem($element.children('.container').attr('id'));
                $element.fadeOut().remove();
            }).capture({cssClass:'GUI_clipboardItemClose'});

        },


        unhoveringItem:function(el){
            //Preview entfernen
            $(el).next().remove();
        },


        redraw:function(){
            if(this.itemcount>1){
                $('#GUI_clipboard').animate({
                     top: '-=20px'                      
                });
            }
        },


        str_replace: function(search, replace, subject, count) {

            var i = 0, j = 0, temp = '', repl = '', sl = 0, fl = 0,
                f = [].concat(search),
                r = [].concat(replace),
                s = subject,
                ra = r instanceof Array, sa = s instanceof Array;
            s = [].concat(s);
            if (count) {
                this.window[count] = 0;
                }

            for (i=0, sl=s.length; i < sl; i++) {
                if (s[i] === '') {
                    continue;
                }
                for (j=0, fl=f.length; j < fl; j++) {
                    temp = s[i]+'';
                    repl = ra ? (r[j] !== undefined ? r[j] : '') : r[0];
                    s[i] = (temp).split(f[j]).join(repl);
                    if (count && s[i] !== temp) {
                        this.window[count] += (temp.length-s[i].length)/f[j].length;}
                }
            }
            return sa ? s : s[0];

        }
 }

那是对象！正如您所看到的，当我将鼠标悬停在元素上时，Object会从内部存储中获取它。但是当我将带有以下内容的对象插入到内容区域

时

var item = $(Clipboard).data($(ui.sender).attr('id')),
                        newItem = $.extend(true, {}, item);
                        content=newItem.content;

然后将鼠标悬停在剪贴板上进行拖动并再次插入，内容区域中的对象（html代码）消失并插入到剪贴板的预览中。

任何想法！

请！

Answer 1

自己解决方案！感谢Leigh Kaszick的精彩JavaScript教程：“面向对象JavaScript的基础知识”。看看：http://net.tutsplus.com/tutorials/javascript-ajax/the-basics-of-object-oriented-javascript/

文字对象总是被引用而功能不是;）这就是诀窍。

文字对象：

var Storage = {
    id:'one',
    content:'blah'
};

功能对象：

function Storage(id,content) = {
         this.id=id;
         this.content:content;
}
var myStorage = new Storage('one','blah');

为了解决我的问题，每次将数据传递到剪贴板时，我都会创建一个新的存储对象实例。它的工作原理！ ;）

对象引用问题

1 个答案: