0

所以我使用了在 Stack Overlow 上找到的脚本来交换文本。它最初工作得很好，但后来我尝试在同一页面上再次使用它，我发现了一个问题。

你可以在这里看到问题：JsFiddle

的HTML

<div class="gallerycard">
    <div id="textMessage"></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">
    <div id="textMessage"></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>

jQuery

var cnt=0, texts=[];

// save the texts in an array for re-use
$(".textContent").each(function() {
  texts[cnt++]=$(this).text();
});
function slide() {
  if (cnt>=texts.length) cnt=0;
  $('#textMessage').html(texts[cnt++]);
  $('#textMessage')
    .fadeIn('fast').animate({opacity: 1.0}, 800).fadeOut('fast', 
     function() {
       return slide()
     }
  );      
}      
slide()

那么，如何防止它们合并呢？

4

2 回答 2

0

有多个问题完全基于过多的复制/粘贴而不理解原因。

两个目标 div 具有相同的 id。你永远不应该在同一个页面上有两个共享相同 id 的元素。现在有一种快速而肮脏的方法来清理它，并且有一种灵活有效的方法来清理它。我选择了灵活的解决方案，我将尽我所能解释它是如何工作的。

<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>

请注意，我在 Gallerycard 中添加了一个 data-target 元素，其中包含我们要放置文本的 div 的 id。我还将每个目标 div 上的 id 更改为唯一。这对于使其全部正常工作至关重要，与这些 id 匹配的 data-target 元素也是如此。

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 的数据目标的值。在每个父级下添加任意数量的内容 div，它们都会被正确找到并关联。

每个 textContent div 中的文本都存储在一个数组中，但是我们使用 push() 函数来消除对计数器变量的需要 - 计数器对于单个实例来说很好，但是对于多个实例来说它们会变得丑陋。

我更改了幻灯片功能以接受两个变量：divId和cnt. divId 是滑块如何知道要定位哪个 div，并且 cnt 允许递归调用保留一个私有计数器，该计数器不会与同时运行的滑块函数的其他实例冲突。

最后，为了再次防止重复并允许进一步扩展，我们不是简单地调用幻灯片，而是遍历哈希以获取 divId 并为我们拥有的每个 divId 调用一个幻灯片实例。继续尝试扩大窗格的数量或在其中一个标题下添加新的 textContent div。现在一切都很顺利。

小提琴在这里：http: //jsfiddle.net/AX4LC/4/

于 2013-10-06T12:38:55.823 回答
0

您需要两个数组，每个数组一个，给每个画廊卡不同的 id 并执行两次

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

并使用相关数组和 ID 调用幻灯片两次

于 2013-10-06T11:38:25.057 回答