Question

看来，当我通过Drupal运行脚本时，Javascript会被修改。我在页面上运行带有jQuery 1.9.1的Bootstrap以及严格的doctype。此特定脚本为Bootstrap轮播创建导航。有谁知道为什么会这样：

原始代码：

            <script type="text/javascript" charset="utf-8">
            $(document).ready(function() {  
               $('.carousel[id]').each(function() {
                   //For each carousel on the page, create this HTML
                   var html = '<div class="nav-collapse collapse" data-target="' + $(this).attr('id') + '"><ul class="nav">';
                       for(var i = 0; i < $(this).find('.item').size(); i ++) {
                           html += '<li';
                               if(i == 0) {
                                   html += ' class="active"';
                               }
                               var item = $(this).find('.item').get(i);
                                   html += '><a href="#">'  + $(item).attr('data-title') + '</a></li>';
                               }                                    
                               html += '</ul></li>';
                               $('.btn-navbar').after(html);
                               $('.carousel-control.left[href="#' + $(this).attr('id') + '"]').hide();

                   }).bind('slid', function(e) {
                       var nav = $('.nav-collapse[data-target="' + $(this).attr('id') + '"] ul');
                       var index = $(this).find('.item.active').index();
                       var item = nav.find('li').get(index);

                       nav.find('li.active').removeClass('active');
                       $(item).addClass('active');

                       if(index == 0) {
                           $('.carousel-control.left[href="#' + $(this).attr('id') + '"]').fadeOut();
                       } else {
                           $('.carousel-control.left[href="#' + $(this).attr('id') + '"]').fadeIn();
                       }

                       if(index == nav.find('li').size() - 1) {
                           $('.carousel-control.right[href="#' + $(this).attr('id') + '"]').fadeOut();
                       } else {
                           $('.carousel-control.right[href="#' + $(this).attr('id') + '"]').fadeIn();
                       }

                   });

                   $('.nav a').bind('click', function(e) {
                       var index = $(this).parent().index();
                       var carousel = $('#' + $(this).closest('.nav-collapse').attr('data-target'));

                       carousel.carousel(index);
                       e.preventDefault();
                   });
            });
            </script>

Drupal之后生成的源代码（错误在代码中标记）：

            <script type="text/javascript" charset="utf-8">
            $(document).ready(function() {  
               $('.carousel[id]').each(function() {
                   //For each carousel on the page, create this HTML
                   var html = '<div class="nav-collapse collapse" data-target="' + $(this).attr('id') + '"><ul class="nav">';
                       for(var i = 0; i &lt; $(this).find('.item').size(); i ++) {                                                  ///&lt replaces < Original Code: for(var i = 0; i &lt; $(this).find('.item').size(); i ++) {    
                           html += '<li';
                               if(i == 0) {
                                   html += ' class="active"';
                               }
                               var item = $(this).find('.item').get(i);
                                   html += '><a href="#">'  + $(item).attr('data-title') + '</a>';                                  ///removed </li> Original Code: html += '><a href="#">'  + $(item).attr('data-title') + '</a>';
                               }                                    
                               html += '</li';></ul>';                                                                              ///adds semicolon and reverses </ul></li> order Original Code: html += '</ul></li>';    
                               $('.btn-navbar').after(html);
                               $('.carousel-control.left[href="#' + $(this).attr('id') + '"]').hide();

                   }).bind('slid', function(e) {
                       var nav = $('.nav-collapse[data-target="' + $(this).attr('id') + '"] ul');
                       var index = $(this).find('.item.active').index();
                       var item = nav.find('li').get(index);

                       nav.find('li.active').removeClass('active');
                       $(item).addClass('active');

                       if(index == 0) {
                           $('.carousel-control.left[href="#' + $(this).attr('id') + '"]').fadeOut();
                       } else {
                           $('.carousel-control.left[href="#' + $(this).attr('id') + '"]').fadeIn();
                       }

                       if(index == nav.find('li').size() - 1) {
                           $('.carousel-control.right[href="#' + $(this).attr('id') + '"]').fadeOut();
                       } else {
                           $('.carousel-control.right[href="#' + $(this).attr('id') + '"]').fadeIn();
                       }

                   });

                   $('.nav a').bind('click', function(e) {
                       var index = $(this).parent().index();
                       var carousel = $('#' + $(this).closest('.nav-collapse').attr('data-target'));

                       carousel.carousel(index);
                       e.preventDefault();
                   });
            });
            </div></script>                                                                                                     ///adds closing div tag

FIX ---

我的错误出现在for循环中：

for(var i = 0; i > $(this).find('.item').size(); i ++) {

i > $(this)应为i!=$(this)

Answer 1

我的错误出现在for循环中：

for(var i = 0; i > $(this).find('.item').size(); i ++) {

i > $(this)应为i!=$(this)

Drupal更改Javascript charset和删除元素

1 个答案: