jquery - 结合多个事件函数jQuery

Question

请原谅我不那么先进的方法，但我正在寻找将多个功能组合为一个的最佳方法。这是我的代码。基本上，我有 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;
     });

score 0 · Accepted Answer

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

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

编辑：

您可以为事件使用event.data 可选对象（因为您使用的是 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 个函数，用于将您的元素迭代到 HTML 中的 6 次或更多次。

score 0 · Accepted Answer

我忘记了 jquery 的index()功能。

你可以尝试这样的事情：

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();
        });
    });
}

jquery - 结合多个事件函数jQuery

2 回答 2

Related

Reference