複数のインスタンスのjQueryスライディングパネル

Question

私は素晴らしい作品のコードを持っています、あなたは1つのスライドdivをトリガーする1つのボタンをクリックすることができます。

$(document).ready(function() { 
$('div.shareTab').on('click', function() { 
    $('.sharePanel').animate({ 
     'width': 'show' 
    }, 1000, function() { 
     $('.shareFade').fadeIn(100); 
    }); 
}); 
$('.shareClose').on('click', function() { 
    $('div.shareFade').fadeOut(100, function() { 
     $('.sharePanel').animate({ 
      'width': 'hide' 
     }, 1000); 
    }); 
}); 
}); 

私は、複数のボタンと、複数のパネルを必要とする別のプロジェクトを持っている私のスクリプトを記述するだけではなく、スクリプトを複数回貼り付け/コピーするより良い方法があります。

私が達成しようとしていることを示すために、下のフィドルを提供しました。その瞬間に、名前の1つをクリックするとすぐにすべてのパネルが開きます。 ここfiddle

Answer 1

あなたは、データ属性とjQueryのいくつかのトリックを使用することを確認することができますそれについて：https://jsfiddle.net/e1szqj20/3/

<ul> 
    <li><a class="shareTab" data-panel-open="#john_panel">John</a></li> 
    <li><a class="shareTab" data-panel-open="#steve_panel">Steve</a></li> 
    <li><a class="shareTab" data-panel-open="#bob_panel">Bob</a></li> 
</ul> 

<div class="sharePanel" id="john_panel"> 
     <div class="shareFade"> 
      <span class="shareClose" data-close-panel="#john_panel">x</span> 
      <div>John's Panel</div> 
     </div> 
</div> 
<div class="sharePanel" id="steve_panel"> 
     <div class="shareFade"> 
      <span class="shareClose" data-close-panel="#steve_panel">x</span> 
      <div>Steve's Panel</div> 
     </div> 
</div> 
<div class="sharePanel" id="bob_panel"> 
     <div class="shareFade"> 
      <span class="shareClose" data-close-panel="#bob_panel">x</span> 
      <div>Bob's Panel</div> 
     </div> 
</div> 

改訂のjQuery：

$(document).ready(function() { 
    $('a.shareTab').on('click', function() { 
     panel = $(this).attr('data-panel-open'); 
     $(panel).animate({ 
      'width': 'show' 
     }, 1000, function() { 
      $(panel +' .shareFade').fadeIn(100); 
     }); 
    }); 
    $('.shareClose').on('click', function() { 
     panel = $(this).attr('data-close-panel'); 
     $(panel+' .shareFade').fadeOut(100, function() { 
      $(panel).animate({ 
       'width': 'hide' 
      }, 1000); 
     }); 
    }); 
}); 

Answer 2

が行くにはかなり迅速かつ汚い方法です：

$(document).ready(function() { 
    $("a.shareTab").each(function(index, item) { 
    $(this).on("click", function() { 
     $('.sharepanel' + $(item).data("panel")).animate({ 
     'width': 'show' 
     }, 1000, function() { 
     $('.sharepanel' + $(item).data("panel") + ' .shareFade').fadeIn(100); 
     }); 
    }); 
    }); 

    $('.shareClose').on('click', function() { 
    $('div.shareFade').fadeOut(100, function() { 
     $('.sharePanel').animate({ 
     'width': 'hide' 
     }, 1000); 
    }); 
    }); 
}); 

これはフィドルフォークです：

FIDDLE