-2

それほど高度なアプローチではありませんが、複数の機能を1つにまとめる最良の方法を探しています。これが私のコードです。基本的に、6つの異なるAjax呼び出しを要求する6つのステップが1ページにあります。問題は、奇妙なことに、ページの下部から始めて上に向かっていくと機能しますが、ページの上部から下に向かって開始すると、イベントが機能しないことです。助言がありますか?ありがとう!

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

2 に答える 2

0

index()jqueryの関数を忘れてしまいました。

あなたはこのようなことを試すことができます:

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();
        });
    });
}
于 2013-01-16T17:41:46.717 に答える
0

まず、私が見たところ、最初の問題は情報の冗長性です。さまざまなパラメータで使用するには、ある種の一意の関数が必要です。おそらく、バインディングを介してイベントに渡されるジェネリック関数が答えになる可能性があります。

次に、手順はほとんど同じなので、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回以上繰り返します。

于 2013-01-16T16:53:03.863 に答える