Текстовый своп Jquery - проблема многократного использования

Существует множество проблем, основанных исключительно на слишком большой копии/вставке, не понимая почему.

Оба целевых div имеют одинаковый идентификатор. У вас никогда не должно быть двух элементов на одной странице, которые имеют один и тот же идентификатор. Теперь есть быстрый и грязный способ очистить его, и есть гибкий и эффективный способ его очистки. Я пошел на гибкое решение, и я объясню, как это работает, насколько я могу.

<div class="gallerycard" data-target="textMessageLeft">
    <div id="textMessageLeft"></div>
    <div class="textContent">
        <div class="girlname">ONE LEFT</div>
    </div>
    <div class="textContent">
        <div class="newgirl">TWO LEFT</div>
    </div>
    <div class="girlimage"></div>
    <div class="girlinfo">TEXT</div>
</div>
<div class="gallerycard" data-target="textMessageRight">
    <div id="textMessageRight"></div>
    <div class="textContent">
        <div class="girlname">ONE RIGHT</div>
    </div>
    <div class="textContent">
        <div class="newgirl">TWO RIGHT</div>
    </div>
    <div class="girlimage"></div>
    <div class="girlinfo">TEXT</div>
</div>

Заметьте, что я добавил элемент данных-цели на галерею, содержащую идентификатор div, в который мы хотим поместить текст. Я также изменил идентификаторы на каждом целевом div, чтобы быть уникальным. Это важно для того, чтобы все это работало, а также элемент данных, соответствующий этим идентификаторам.

texts = {};

// save the texts in an array for re-use
$(".textContent").each(function () {
    var target = $(this).parent().attr('data-target');
    if (texts[target] == null) { texts[target] = []; }
    texts[target].push($(this).text());
});

function slide(divId, cnt) {
    if (cnt >= texts[divId].length) cnt = 0;
    $('#' + divId).html(texts[divId][cnt++]);
    $('#' + divId)
        .fadeIn('fast').animate({
        opacity: 1.0
    }, 800).fadeOut('fast',

    function () {
        return slide(divId,cnt)
    });
}

for (var t in texts)
{
    slide(t, 0);
}

В javascript я много изменил, чтобы сделать это расширяемым и гибким решением, а не просто дублировать то, что уже было с двумя отдельными именами.

Сначала мы удалили счетчик и изменили текст на объект ({} вместо []). Отсюда я могу использовать тексты как хэш, что упрощает остальную часть скрипта. Ключ хэша - это значение цели данных из контейнера div сообщения и разделов содержимого. Добавьте столько элементов контента, сколько захотите, под каждым родителем, и все они будут найдены и связаны правильно.

Тексты из каждого div textContent хранятся в массиве, но мы используем функцию push() для устранения необходимости в переменной счетчика - счетчики отлично подходят для одного экземпляра, но они становятся уродливыми с кратными.

Я изменил функцию слайда, чтобы принять две переменные: divId и cnt. divId - это то, как слайдер знает, какой div для цели и cnt позволяет рекурсивному вызову сохранять закрытый счетчик, который не будет конфликтовать с другими экземплярами функции слайдера, работающими одновременно.

Наконец, чтобы снова предотвратить дублирование и разрешить дальнейшее расширение. Вместо простого вызова слайда мы перебираем хэш для получения divId и вызываем экземпляр слайда для каждого divId, который у нас есть. Идем дальше и пытаемся расширить количество панелей или добавить новые div textContent под одним из заголовков. Теперь все работает очень гладко.

Скрипка здесь: http://jsfiddle.net/AX4LC/4/

Вам нужно два массива, по одному для каждого, дать каждой из галерей разные идентификаторы и сделать это дважды

var cnt=0, firstTexts=[], secondTexts=[];

// save the texts in an array for re-use
$('#firstID > .textContent').each(function() {
  firstTexts[cnt++]=$(this).text();
});

cnt = 0;
// save the texts in an array for re-use
$('#secondID > .textContent').each(function() {
  secondTexts[cnt++]=$(this).text();
});

и дважды вызовите слайд с соответствующим массивом и идентификатором