javascript - 如何通过 jQuery 动态添加元素

Question

下面的脚本创建一个 slider 小部件，它采用定义列表并将其转换为幻灯片。每个 dt 元素都通过 css 旋转成为“spine”，用于显示 dt 的同级 dd 元素。

我想做的是增强它，这样我就可以选择从布局中删除书脊，而只需使用幻灯片两侧的前进和后退按钮。为此，我通过 CSS 将 dt 设置为 display:none 并使用“删除书脊布局”注释下的代码来测试可见性。

这可以很好地删除脊柱，现在我需要动态创建 2 个绝对定位的 div 来保存左箭头和右箭头图像，并向它们附加一个点击处理程序。

我的第一个问题是我创建 div 的尝试不起作用。

非常感谢任何帮助。

jQuery.noConflict();
(function(jQuery) {
    if (typeof jQuery == 'undefined') return;

    jQuery.fn.easyAccordion = function(options) {

    var defaults = {            
        slideNum: true,
        autoStart: false,
        pauseOnHover: true,
        slideInterval: 5000
    };

    this.each(function() {

        var settings = jQuery.extend(defaults, options);
        jQuery(this).find('dl').addClass('easy-accordion');

        // -------- Set the variables ------------------------------------------------------------------------------

        jQuery.fn.setVariables = function() {
            dlWidth = jQuery(this).width()-1;
            dlHeight = jQuery(this).height();
            if (!jQuery(this).find('dt').is(':visible')){
                dtWidth = 0;
                dtHeight = 0;
                slideTotal = 0;
            // Add an element to rewind to previous slide
                var slidePrev = document.createElement('div');
                slidePrev.className = 'slideAdv prev';
                jQuery(this).append(slidePrev);
                jQuery('.slideAdv.prev').css('background':'red','width':'50px','height':'50px');

            // Add an element to advance to the next slide
                var slideNext = document.createElement('div');
                slideNext.className = 'slideAdv next';
                jQuery(this).append(slideNext);
                jQuery('.slideAdv.next').css('background':'green','width':'50px','height':'50px');
            }
            else
            {
                dtWidth = jQuery(this).find('dt').outerHeight();
                if (jQuery.browser.msie){ dtWidth = jQuery(this).find('dt').outerWidth();}
                dtHeight = dlHeight - (jQuery(this).find('dt').outerWidth()-jQuery(this).find('dt').width());
                slideTotal = jQuery(this).find('dt').size();
            }

            ddWidth = dlWidth - (dtWidth*slideTotal) - (jQuery(this).find('dd').outerWidth(true)-jQuery(this).find('dd').width());
            ddHeight = dlHeight - (jQuery(this).find('dd').outerHeight(true)-jQuery(this).find('dd').height());
        };
        jQuery(this).setVariables();

        // -------- Fix some weird cross-browser issues due to the CSS rotation -------------------------------------

        if (jQuery.browser.safari){ var dtTop = (dlHeight-dtWidth)/2; var dtOffset = -dtTop;  /* Safari and Chrome */ }
        if (jQuery.browser.mozilla){ var dtTop = dlHeight - 20; var dtOffset = - 20; /* FF */ }
        if (jQuery.browser.msie){ var dtTop = 0; var dtOffset = 0; /* IE */ }
        if (jQuery.browser.opera){ var dtTop = (dlHeight-dtWidth)/2; var dtOffset = -dtTop; } /* Opera */

        // -------- Getting things ready ------------------------------------------------------------------------------

        var f = 1;
        var paused = false;
        jQuery(this).find('dt').each(function(){
            jQuery(this).css({'width':dtHeight,'top':dtTop,'margin-left':dtOffset});
            // add unique id to each tab
            jQuery(this).addClass('spine_' + f);
            // add active corner
            var corner = document.createElement('div');
                corner.className = 'activeCorner spine_' + f;
            jQuery(this).append(corner);

            if(settings.slideNum == true){
                jQuery('<span class="slide-number">'+f+'</span>').appendTo(this);
                if(jQuery.browser.msie){    
                    var slideNumLeft = parseInt(jQuery(this).find('.slide-number').css('left'));
                    if(jQuery.browser.version == 6.0 || jQuery.browser.version == 7.0){
                        jQuery(this).find('.slide-number').css({'bottom':'auto'});
                        slideNumLeft = slideNumLeft - 14;
                        jQuery(this).find('.slide-number').css({'left': slideNumLeft})
                    }
                    if(jQuery.browser.version == 8.0 || jQuery.browser.version == 9.0){
                    var slideNumTop = jQuery(this).find('.slide-number').css('bottom');
                    var slideNumTopVal = parseInt(slideNumTop) + parseInt(jQuery(this).css('padding-top'))  - 20; 
                    jQuery(this).find('.slide-number').css({'bottom': slideNumTopVal});
                        slideNumLeft = slideNumLeft - 10;
                    jQuery(this).find('.slide-number').css({'left': slideNumLeft})
                    jQuery(this).find('.slide-number').css({'marginTop': 10});
                    }
                } else {
                    var slideNumTop = jQuery(this).find('.slide-number').css('bottom');
                    var slideNumTopVal = parseInt(slideNumTop) + parseInt(jQuery(this).css('padding-top')); 
                    jQuery(this).find('.slide-number').css({'bottom': slideNumTopVal}); 
                }
            }
            f = f + 1;
        });

        if(jQuery(this).find('.active').size()) { 
            jQuery(this).find('.active').next('dd').addClass('active');
        } else {
            jQuery(this).find('dt:first').addClass('active').next('dd').addClass('active');
        }

        jQuery(this).find('dt:first').css({'left':'0'}).next().css({'left':dtWidth});
        jQuery(this).find('dd').css({'width':ddWidth,'height':ddHeight});   


        // -------- Functions ------------------------------------------------------------------------------

        jQuery.fn.findActiveSlide = function() {
                var i = 1;
                this.find('dt').each(function(){
                if(jQuery(this).hasClass('active')){
                    activeID = i; // Active slide
                } else if (jQuery(this).hasClass('no-more-active')){
                    noMoreActiveID = i; // No more active slide
                }
                i = i + 1;
            });
        };

        jQuery.fn.calculateSlidePos = function() {
            var u = 2;
            jQuery(this).find('dt').not(':first').each(function(){  
                var activeDtPos = dtWidth*activeID;
                if(u <= activeID){
                    var leftDtPos = dtWidth*(u-1);
                    jQuery(this).animate({'left': leftDtPos});
                    if(u < activeID){ // If the item sits to the left of the active element
                        jQuery(this).next().css({'left':leftDtPos+dtWidth});    
                    } else{ // If the item is the active one
                        jQuery(this).next().animate({'left':activeDtPos});
                    }
                } else {
                    var rightDtPos = dlWidth-(dtWidth*(slideTotal-u+1));
                    jQuery(this).animate({'left': rightDtPos});
                    var rightDdPos = rightDtPos+dtWidth;
                    jQuery(this).next().animate({'left':rightDdPos});   
                }
                u = u+ 1;
            });
            setTimeout( function() {
                jQuery('.easy-accordion').find('dd').not('.active').each(function(){ 
                    jQuery(this).css({'display':'none'});
                });
            }, 400);
        };

        jQuery.fn.activateSlide = function() {
            this.parent('dl').setVariables();   
            this.parent('dl').find('dd').css({'display':'block'});
            this.parent('dl').find('dd.plus').removeClass('plus');
            this.parent('dl').find('.no-more-active').removeClass('no-more-active');
            this.parent('dl').find('.active').removeClass('active').addClass('no-more-active');
            this.addClass('active').next().addClass('active');  
            this.parent('dl').findActiveSlide();
            if(activeID < noMoreActiveID){
                this.parent('dl').find('dd.no-more-active').addClass('plus');
            }
            this.parent('dl').calculateSlidePos();  
        };

        jQuery.fn.rotateSlides = function(slideInterval, timerInstance) {
            var accordianInstance = jQuery(this);
            timerInstance.value = setTimeout(function(){accordianInstance.rotateSlides(slideInterval, timerInstance);}, slideInterval);
            if (paused == false){
                jQuery(this).findActiveSlide();
                var totalSlides = jQuery(this).find('dt').size();
                var activeSlide = activeID;
                var newSlide = activeSlide + 1;
                if (newSlide > totalSlides) {newSlide = 1; paused = true;}
                jQuery(this).find('dt:eq(' + (newSlide-1) + ')').activateSlide(); // activate the new slide
            }
        }

        // -------- Let's do it! ------------------------------------------------------------------------------

        function trackerObject() {this.value = null}
        var timerInstance = new trackerObject();

        jQuery(this).findActiveSlide();
        jQuery(this).calculateSlidePos();

        if (settings.autoStart == true){
            var accordianInstance = jQuery(this);
            var interval = parseInt(settings.slideInterval);
            timerInstance.value = setTimeout(function(){
                accordianInstance.rotateSlides(interval, timerInstance);
                }, interval);
        } 

        jQuery(this).find('dt').not('active').click(function(){
            var accordianInstance = jQuery(this); //JSB to fix bug with IE < 9
            jQuery(this).activateSlide();
            clearTimeout(timerInstance.value);
            timerInstance.value = setTimeout(function(){
                accordianInstance.rotateSlides(interval, timerInstance);
                }, interval);
        }); 

        if (!(jQuery.browser.msie && jQuery.browser.version == 6.0)){ 
            jQuery('dt').hover(function(){
                jQuery(this).addClass('hover');
            }, function(){
                jQuery(this).removeClass('hover');
            });
        }
        if (settings.pauseOnHover == true){
            jQuery('dd').hover(function(){
                paused = true;
            }, function(){
                paused = false;
            });
        }
    });
    };
})(jQuery);

Answer 1

在 jQuery 中创建元素很容易:

$newDiv = $('<div />');
$newDiv.css({
  'position': 'absolute',
  'top': '10px',
  'left': '10px'
});

$newDiv.on('click', function() {
  alert('You have clicked me');
});

$('#your_container').append($newDiv);