Как я могу сделать JS, который требует ручного ввода динамического?

Question

Я действительно не знаю, как спросить это, поэтому я написал сценарий здесь: http://jsbin.com/acaxi/edit
Это довольно просто, я пытаюсь создать раздвижные панели.

Я знаю, что есть много сценариев, которые делают это хорошо, если честно, их слишком много.

Если кто-то думает, что есть плагин, который вы могли бы порекомендовать вместо моего скрипта, тогда, пожалуйста, поделитесь!

Answer 1

Я до сих пор не уверен, в чем ваш вопрос, но я немного переработал ваш код, чтобы он работал с любым количеством панелей каналов ( обновленная демонстрация ).

$(document).ready(function(){

  var feeds = $('#feeds div'),
      numFeeds = feeds.length;

  feeds
    .click(function(){
      $(this)
        .animate({"margin-left": "-200px", opacity: 0}, "fast")
        .animate({"margin-left": "200px"}, "fast");
      // add 2 since the id isn't zero based
      var next = ( $(this).index() + 2 > numFeeds ) ? 1 : $(this).index() + 2;
      $('div#feed' + next).animate({"margin-left": 0, opacity: 1}, "fast")
    })
    .nextAll().css({ 'margin-left' : '200px', opacity : 0 });

});

---

Для динамического добавления каналов вам необходимо либо прикрепить функцию щелчка к каждому добавленному новому каналу, либо использовать обработчик событий jQuery .live (). Я выбрал предыдущий метод. Вот обновленная демоверсия и код:

$(document).ready(function(){

  var feeds = $('#feeds .feeds'),
      numFeeds = feeds.length;

  // initialize
  feeds
   .click(function(){ animateFeed(this, numFeeds); })
   .nextAll().css({ 'margin-left' : '200px', opacity : 0 });

  // add another feed
  $('.addFeed').click(function(){
   $('<div id="feed' + ( numFeeds++ +1 ) + '" class="feeds">' + numFeeds +'</div>')
    .click(function(){ animateFeed(this, numFeeds); })
    .css({ 'margin-left' : '200px', opacity : 0 })
    .appendTo(feeds.parent());
   $('#num').text(numFeeds);
  })

});

// animate feed panel
function animateFeed(el, num){
 var indx = $(el).index(),
     next = ( indx + 1 ) % num;
 $('.feeds').removeClass('active');
 $(el)
  .animate({ marginLeft : '-200px', opacity: 0}, 'fast')
  .animate({ marginLeft : '200px'}, 'fast' );
 $('.feeds:eq(' + next + ')').animate({ marginLeft : 0, opacity : 1}, 'fast', function(){ $(this).addClass('active') } );
}