结合多个事件函数jQuery

时间：2013-01-16 16:35:18

标签： jquery

原谅我不是那么先进的方法，但我正在寻找将多个功能合二为一的最佳方法。这是我的代码。基本上，我有一个页面的6个步骤，请求6个不同的Ajax调用。奇怪的是，问题是当你从页面底部开始工作时它们起作用，但是从页面顶部开始，事件不起作用。有什么建议？谢谢！

html：

 <!--   Expanding Block 1     -->
<div class="row span10 center clearfix">  <a href="http://diyshedsupply.com/step-1-tab/"  class="show_hide btn btn-primary pull-right">+ -</a><div class="pull-right"> <strong> Specs and Details &nbsp; </strong></div><br />
</div>
<div class="row span10 center slidingDiv">

<div class="row span9 center clearfix">

<div id="ajax-content">Default Content</div>
</div>
</div>
<!--   Expanding Block      -->   

 <!--   Expanding Block  2     -->
<div class="row span10 center clearfix">  <a href="http://diyshedsupply.com/step-2-tab/"  class="show_hide2 btn btn-primary pull-right">+ -</a><div class="pull-right"> <strong> Specs and Details &nbsp; </strong></div><br />
</div>
<div class="row span10 center slidingDiv2">

<div class="row span9 center clearfix">

<div id="ajax-content2">Default Content</div>

</div>
</div>
<!--   Expanding Block      --> 

ect...

JavaScript：

// Load Ajax Content Step 1 //


     $('.slidingDiv').hide();
     $('.show_hide').show();
     $('.show_hide').click(function () {
         $('.slidingDiv').slideToggle(1600, function () {
             $('.show_hide').addClass('close-tabs');
             /* do anything after animation is complete */
             $('ul.tabs').each(function (e) {
                 var $active, $content, $links = $(this).find('a');
                 // If the location.hash matches one of the links, use that as the active tab.
                 // If no match is found, use the first link as the initial active tab.
                 $active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);
                 $active.addClass('active1');
                 $content = $($active.attr('href'));
                 // Hide the remaining content
                 $links.not($active).each(function () {
                     $($(this).attr('href')).hide();
                 });
                 // Bind the click event handler
                 $(this).on('click', 'a', function (e) {
                     // Make the old tab inactive.
                     $active.removeClass('active1');
                     $content.hide();
                     // Update the variables with the new link and content
                     $active = $(this);
                     $content = $($(this).attr('href'));
                     // Make the tab active.
                     $active.addClass('active1');
                     $content.show();
                     // Prevent the anchor's default click action
                     e.preventDefault();
                 });
             });
         });
         $('#ajax-content').empty().append("<div class='loading'><img src='/wp-content/themes/diy/img/ajax-loader.gif' alt='Loading' /></div>");
         $('.show_hide a').removeClass('current');
         $(this).addClass('current');
         $.ajax({
             url: this.href,
             success: function (html) {
                 $("#ajax-content").empty().append(html);
             }
         });
         return false;
     });


// Load Ajax Content Step 2 //

     $('.slidingDiv2').hide();
     $('.show_hide2').show();
     $('.show_hide2').click(function () {
         $('.slidingDiv2').slideToggle(1600, function () {
             $('.show_hide2').addClass('close-tabs');
             /* do anything after animation is complete */
             $('ul.tabs2').each(function (e) {
                 var $active, $content, $links = $(this).find('a');
                 // If the location.hash matches one of the links, use that as the active tab.
                 // If no match is found, use the first link as the initial active tab.
                 $active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);
                 $active.addClass('active2');
                 $content = $($active.attr('href'));
                 // Hide the remaining content
                 $links.not($active).each(function () {
                     $($(this).attr('href')).hide();
                 });
                 // Bind the click event handler
                 $(this).on('click', 'a', function (e) {
                     // Make the old tab inactive.
                     $active.removeClass('active2');
                     $content.hide();
                     // Update the variables with the new link and content
                     $active = $(this);
                     $content = $($(this).attr('href'));
                     // Make the tab active.
                     $active.addClass('active2');
                     $content.show();
                     // Prevent the anchor's default click action
                     e.preventDefault();
                 });
             });
         });
         $('#ajax-content2').empty().append("<div class='loading'><img src='/wp-content/themes/diy/img/ajax-loader.gif' alt='Loading' /></div>");
         $('.show_hide2 a').removeClass('current');
         $(this).addClass('current');
         $.ajax({
             url: this.href,
             success: function (html) {
                 $("#ajax-content2").empty().append(html);
             }
         });
         return false;
     });

2 个答案:

答案 0 :(得分：0)

首先，从我看到的，第一个问题是信息的冗余。您需要某种独特的函数来使用不同的参数，也许通过绑定传递给事件的泛型函数可能是一个答案。

其次，由于步骤大致相同，为什么不考虑使用一些只包含对ID，类等的引用的迭代？通过这种方式，您可以将一些简单的for循环减少到某个数组上，该循环将参数传递给绑定的回调。

修改

您可以将event.data optional object用于事件（因为您使用的是jQuery）。当然，这只是一个必须改进的想法：

var NUM_OF_SECTIONS = 6;

function mySlidingFunc( event ) {
  $('.slidingDiv' + event.data.id).slideToggle( 1600, function () {
     $('.show_hide' + event.data.id).addClass('close-tabs');
     /* do anything after animation is complete */

     // here the rest of the code ....
  });
}

for ( var i = 0 ; i < NUM_OF_SECTIONS; i++ ) {
  $('.slidingDiv' + i).hide();
  $('.show_hide' + i).show();
  $('.show_hide').on('click', { id: i }, mySlidingFunc );
}

这就是全部。 1个循环和1个函数，用于对元素进行6次或更多次迭代到HTML中。

答案 1 :(得分：0)

我忘记了jquery的index() function。

您可以尝试这样的事情：

HTML 

<div class="row span10 center clearfix">
    <a href="http://diyshedsupply.com/step-1-tab/"  class="show_hide btn btn-primary pull-right">+ -</a>
    <div class="pull-right"><strong> Specs and Details</strong></div><br />
</div>
<div class="row span10 center slidingDiv"> 
    <div class="row span9 center clearfix">
        <div id="ajax-content0" data-fetched="false">Default Content</div>
    </div>
</div>
<div class="row span10 center clearfix">
    <a href="http://diyshedsupply.com/step-1-tab/"  class="show_hide btn btn-primary pull-right">+ -</a>
    <div class="pull-right"><strong> Specs and Details</strong></div><br />
</div>
<div class="row span10 center slidingDiv"> 
    <div class="row span9 center clearfix">
        <div id="ajax-content1" data-fetched="false">Default Content</div>
    </div>
</div>

<div class="row span10 center clearfix">
    <a href="http://diyshedsupply.com/step-1-tab/"  class="show_hide btn btn-primary pull-right">+ -</a>
    <div class="pull-right"><strong> Specs and Details</strong></div><br />
</div>
<div class="row span10 center slidingDiv"> 
    <div class="row span9 center clearfix">
        <div id="ajax-content2" data-fetched="false">Default Content</div>
    </div>
</div>

的jQuery 

$('.show_hide').click(function (e) {
    var index = $('.show_hide').index(this); //which one am I working with?
    //check if content has already been loaded via ajax
    if($("#ajax-content" + index).attr('data-fetched') === 'false') {
        $.ajax({
            url: this.href,
            beforeSend: function () {
                $('#ajax-content' + index).html("<div class='loading'><img src='/wp-content/themes/diy/img/ajax-loader.gif' alt='Loading' /></div>");
            },
            success: function (html) {
                $("#ajax-content" + index).html(html);
                $("#ajax-content" + index).attr('data-fetched', 'true');
                $('.show_hide:eq(' + index + ')').addClass('close-tabs');
                handletabs(index);
                $('.slidingDiv:eq(' + index + ')').slideToggle(1600, function () {
                    /* do anything after animation is complete */
                });
                $('.show_hide:eq(' + index + ')' + ' a').removeClass('current');
                $(this).addClass('current');
            }
        });
    } else {
        $('.slidingDiv:eq(' + index + ')').slideToggle(1600);
    }
    e.preventDefault();
});

function handletabs(index) {
    $('.slidingDiv:eq(' + index + ')' + ' ul.tabs').each(function (e) {
        //foreach new tab
        //bind to click event
        $(this).on('click', function (e) {
            //remove active class from all links in parent('tabby')
            $(e).parents('tabby').children('a').removeClass('active');
            //add to new link
            $(e).addClass('active');
            //hide all divs in parent('tabby')
            $(e).parents('tabby').children('div').hide();
            //use href to show div
            $($(this).attr('href')).show();
            // Prevent the anchor's default click action
            e.preventDefault();
        });
    });
}
相关问题
最新问题