0

ここで 2 つの部分についてお役に立てれば幸いです。

1 つは、jQuery のベスト プラクティスに関して、コードをより効率的に短縮/効率化する方法を理解するのに役立つことです。

もう 1 つはコードを拡張することです。クリックして div をスライドさせます (animate/left を使用) が、ページ上でこれを何度も繰り返しています。私が求めているのは、divがクリックされてスライドアウトし、別のdivがクリックされた場合、開いているdivがスライドして戻り、新しいdivがスライドアウトすることです。等々。それが理にかなっていることを願っています。

jQuery

$('.each-brew.ale').toggle(function() {       
  $('.each-brew-content.ale').animate({ left: '0' }, 1000);
  $('.each-brew-content.ale').css('display','block');
}, function() {       
  $('.each-brew-content.ale').animate({ left: '-100%' }, 1000);
  $('.each-brew-content.ale').css('display','none');
});
$('.each-brew.bramling').toggle(function() {       
  $('.each-brew-content.bramling').animate({ left: '0' }, 1000);
  $('.each-brew-content.bramling').css('display','block');
}, function() {       
  $('.each-brew-content.bramling').animate({ left: '-100%' }, 1000);
  $('.each-brew-content.bramling').css('display','none');
});
$('.each-brew.bullet').toggle(function() {       
  $('.each-brew-content.bullet').animate({ left: '0' }, 1000);
  $('.each-brew-content.bullet').css('display','block');
}, function() {       
  $('.each-brew-content.bullet').animate({ left: '-100%' }, 1000);
  $('.each-brew-content.bullet').css('display','none');
});
$('.each-brew.miami-weisse').toggle(function() {       
  $('.each-brew-content.miami-weisse').animate({ left: '0' }, 1000);
  $('.each-brew-content.miami-weisse').css('display','block');
}, function() {       
  $('.each-brew-content.miami-weisse').animate({ left: '-100%' }, 1000);
  $('.each-brew-content.miami-weisse').css('display','none');
});

HTML

<div class="row">
    <div class="four columns first-margin-offset">
        <div class="each-brew-container delay-1">
                                        <div class="each-brew ale">
                <span class="each-brew-title">Ale<span class="each-brew-description">South Pacific Best Bitter</span></span>
                </div>
                <div class="each-brew-separator"></div>
                                        <div class="each-brew bramling">
                <span class="each-brew-title">Bramling<span class="each-brew-description">English Hop Golden Ale</span></span>
                </div>
                <div class="each-brew-separator"></div>
                                        <div class="each-brew bullet">
                <span class="each-brew-title">Bullet<span class="each-brew-description">Original IPA</span></span>
                </div>
                <div class="each-brew-separator"></div>
                                        <div class="each-brew miami-weisse">
                <span class="each-brew-title">Miami Weisse<span class="each-brew-description">American Hopped Wheat Beer</span></span>
                </div>
                <div class="each-brew-separator"></div>
                    </div>
    </div>
            <div class="each-brew-content ale">
        <div class="three columns first-margin-offset">

                        <div class="each-brew-image"><img width="327" height="511" src="ale-clip-01.png" class="attachment-brew-standard" alt="ale-clip-01" /></div>        </div>
        <div class="three columns first-margin-offset">
            <div class="default-content-area content-area ale-content">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
            </div>
        </div>
    </div>
            <div class="each-brew-content bramling">
        <div class="three columns first-margin-offset">

                        <div class="each-brew-image"><img width="326" height="511" src="bramling.png" class="attachment-brew-standard" alt="bramling" /></div>      </div>
        <div class="three columns first-margin-offset">
            <div class="default-content-area content-area bramling-content">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
            </div>
        </div>
    </div>
            <div class="each-brew-content bullet">
        <div class="three columns first-margin-offset">

                        <div class="each-brew-image"><img width="327" height="511" src="bullet.png" class="attachment-brew-standard" alt="bullet" /></div>      </div>
        <div class="three columns first-margin-offset">
            <div class="default-content-area content-area bullet-content">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
            </div>
        </div>
    </div>
            <div class="each-brew-content miami-weisse">
        <div class="three columns first-margin-offset">

                        <div class="each-brew-image"><img width="326" height="511" src="miami-weisse.png" class="attachment-brew-standard" alt="miami-weisse" /></div>      </div>
        <div class="three columns first-margin-offset">
            <div class="default-content-area content-area miami-weisse-content">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
        </div>
    </div>
    </div>
4

2 に答える 2

1

1）ループするだけです：

   var animateClasses = ['ale', 'brambling', 'bullet', 'miami-weisse'];
   for (var i=0; i<animateClasses.length; i++) {
      (function(animCls) { 
      $('.each-brew.'+animCls).toggle(function() {       
         $('.each-brew-content.'+animCls).show().animate({ left: '0' }, 1000);
      }, function() {       
           $('.each-brew-content.'+animCls)
                  .animate({ left: '-100%' }, 1000, function() { $(this).hide()});  // hide the element in the animation on-complete callback  
      });
      })(animateClasses[i]);  //  self calling anonymous function
   }

2) div で最後にクリックされたものを保持するグローバル変数を保持します。上書きする前に、null でない場合はアニメーションを返します。例えば：

var lastClicked = null;
var animateClasses = ['ale', 'brambling', 'bullet', 'miami-weisse'];
   for (var i=0; i<animateClasses.length; i++) {
      (function(animCls) { 
      $('.each-brew.'+animCls).toggle(function() {
    if (lastClicked && lastClicked != this) {
        // animate it back
        $(lastClicked).trigger('click');
    }
    lastClicked = this;
    // continue with handler as before
于 2013-02-05T15:06:03.957 に答える
0

これは私が最終的に得たものです-@Iftahのコードを組み合わせて使用​​ します：

var lastClicked = null;
var animateClasses = ['ale', 'bramling', 'bullet', 'miami-weisse'];
   for (var i=0; i<animateClasses.length; i++) {
      (function(animCls) { 
      $('.each-brew.'+animCls).toggle(function() {
    if (lastClicked && lastClicked != this) {
        // animate it back
        $(lastClicked).trigger('click');
    }
    lastClicked = this;
    $('.each-brew-content.'+animCls).show().animate({ left: '0' }, 1000).css('position','inherit');
      }, function() {       
           $('.each-brew-content.'+animCls)
                  .animate({ left: '-33.3333%' }, 1000, function() { $(this).hide()})  // hide the element in the animation on-complete callback
                  .css('position','relative'); 
      });
      })(animateClasses[i]);  //  self calling anonymous function
   }

新商品の入荷を遅らせればいいだけ…

于 2013-02-08T13:46:40.913 に答える