Fatal编程技术网
  • jquery/
  • 组合多个事件函数jQuery

组合多个事件函数jQuery

jquery

组合多个事件函数jQuery,jquery,Jquery,请原谅我没有这么先进的方法，但我正在寻找将多个函数组合成一个函数的最佳方法。这是我的密码。基本上，我有6个步骤，一个页面请求6个不同的Ajax调用。问题是，奇怪的是，当你从页面底部开始向上工作时，它们就起作用了，但从页面顶部向下开始，事件就不起作用了。有什么建议吗？谢谢 html： <!-- Expanding Block 1 --> <div class="row span10 center clearfix"> <a href="http://d

请原谅我没有这么先进的方法，但我正在寻找将多个函数组合成一个函数的最佳方法。这是我的密码。基本上，我有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;
     });

//加载Ajax内容第1步//
$（'.slidingDiv'）.hide（）；
$（'.show_hide'）.show（）；
$（'.show_hide'）。单击（函数（）{
$（'.slidingDiv'）。滑动切换（1600，函数（）{
$（'.show_hide'）.addClass（'close-tabs'）；
/*动画完成后执行任何操作*/
$（'ul.tabs'）。每个（函数（e）{
var$active，$content，$links=$（this.find（'a'）；
//如果location.hash与其中一个链接匹配，则将其用作活动选项卡。
//如果未找到匹配项，请使用第一个链接作为初始活动选项卡。
$active=$（$links.filter（'[href=“'+location.hash+'“]'）[0]| |$links[0]）；
$active.addClass（'active1'）；
$content=$（$active.attr（'href'））；
//隐藏剩余的内容
$links.not（$active）。每个（函数（）{
$（$（this.attr（'href'））.hide（）；
});
//绑定单击事件处理程序
$（此）。在（'click'，'a'，函数（e）上{
//使旧选项卡处于非活动状态。
$active.removeClass（'active1'）；
$content.hide（）；
//使用新链接和内容更新变量
$active=$（此项）；
$content=$（$（this.attr（'href'））；
//使选项卡处于活动状态。
$active.addClass（'active1'）；
$content.show（）；
//防止锚定的默认单击操作
e、 预防默认值（）；
});
});
});
$（'#ajax content'）.empty（）.append（“”）；
$（'.show_hide a'）.removeClass（'current'）；
$（this.addClass（'current'）；
$.ajax({
url:this.href，
成功：函数（html）{
$（“#ajax内容”）.empty（）.append（html）；
}
});
返回false；
});
//加载Ajax内容第2步//
$（'.slidingDiv2'）.hide（）；
$（'.show_hide2'）.show（）；
$（'.show_hide2'）。单击（函数（）{
$（'.slidingDiv2'）。滑动切换（1600，函数（）{
$（'.show_hide2'）.addClass（'close-tabs'）；
/*动画完成后执行任何操作*/
$（'ul.tabs2'）。每个（函数（e）{
var$active，$content，$links=$（this.find（'a'）；
//如果location.hash与其中一个链接匹配，则将其用作活动选项卡。
//如果未找到匹配项，请使用第一个链接作为初始活动选项卡。
$active=$（$links.filter（'[href=“'+location.hash+'“]'）[0]| |$links[0]）；
$active.addClass（'active2'）；
$content=$（$active.attr（'href'））；
//隐藏剩余的内容
$links.not（$active）。每个（函数（）{
$（$（this.attr（'href'））.hide（）；
});
//绑定单击事件处理程序
$（此）。在（'click'，'a'，函数（e）上{
//使旧选项卡处于非活动状态。
$active.removeClass（'active2'）；
$content.hide（）；
//使用新链接和内容更新变量
$active=$（此项）；
$content=$（$（this.attr（'href'））；
//使选项卡处于活动状态。
$active.addClass（'active2'）；
$content.show（）；
//防止锚定的默认单击操作
e、 预防默认值（）；
});
});
});
$（'#ajax-content2'）.empty（）.append（“”）；
$（'.show_hide2 a'）.removeClass（'current'）；
$（this.addClass（'current'）；
$.ajax({
url:this.href，
成功：函数（html）{
$（“#ajax-content2”）.empty（）.append（html）；
}
});
返回false；
});
首先，据我所见，第一个问题是信息冗余。您需要某种独特的函数来与不同的参数一起使用，可能通过绑定传递给事件的通用函数就是一个答案

第二，由于步骤非常相同，为什么不考虑使用一些数组来迭代只包含对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 );
}

var NUM_OF_段=6；
函数mySlidingFunc（事件）{
$（'.slidingDiv'+event.data.id）.slideToggle（1600，函数（）{
$（'.show_hide'+event.data.id）.addClass（'close-tabs'）；
/*动画完成后执行任何操作*/
//下面是代码的其余部分。。。。
});
}
对于（var i=0；i
就这些。1个循环和1个函数，对HTML中的元素进行6次或更多的迭代

我忘了jquery的<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> 
$('.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();
        });
    });
}