Javascript 要修改的代码笔

我有一个我感兴趣的代码笔：

https://codepen.io/rachsmith/pen/PWxoLN 

问题在于JavaScript代码只考虑到每个卡片在展开时都有相同的文本，并且文本包含在代码中

作者提到这只是一个练习，我非常喜欢这项工作不依赖任何外部来源

那么，如何更改代码，以便将正确的文本分配给单击的卡

考虑到我只打算有两张卡片。这是我在将文本注入卡片文本字段的函数上尝试的：

function animateCoverUp(card) {
  // get the position of the clicked card
  var cardPosition = card.getBoundingClientRect();
  // get the style of the clicked card
  var cardStyle = getComputedStyle(card);
  setCoverPosition(cardPosition);
  setCoverColor(cardStyle);
  scaleCoverToFillWindow(cardPosition);
  // update the content of the opened page
  if (cards[0]) {
  openContentText.innerHTML = '<h1>'+card.children[2].textContent+'</h1>'+paragraphText0;
  openContentImage.src = card.children[1].src;
  } else if (cards[1]) {
    openContentText.innerHTML = '<h1>'+card.children[2].textContent+'</h1>'+paragraphText1;
    openContentImage.src = card.children[1].src;
  }
  setTimeout(function() {
    // update the scroll position to 0 (so it is at the top of the 'opened' page)
    window.scroll(0, 0);
    // set page to open
    pageIsOpen = true;
  }, 300);
}

函数animateCoverUp（卡片）{
//获取单击的卡的位置
var cardPosition=card.getBoundingClientRect（）；
//获取所单击卡片的样式
var cardStyle=getComputedStyle（卡片）；
设置盖位置（卡位置）；
setCoverColor（卡片样式）；
ScaleConvertofillWindow（卡片位置）；
//更新已打开页面的内容
如果（卡片[0]）{
openContentText.innerHTML=''+card.children[2].textContent+''+paragraphText0；
openContentImage.src=card.children[1].src；
}else if（卡片[1]）{
openContentText.innerHTML=''+card.children[2].textContent+''+paragraphText1；
openContentImage.src=card.children[1].src；
}
setTimeout（函数（）{
//将滚动位置更新为0（使其位于“打开”页面的顶部）
窗口。滚动（0，0）；
//将页面设置为打开
pageIsOpen=true；
}, 300);
}

基本上，我已经将其添加到原始函数中，但它不起作用，并且它一直在注入paragraphText0：

if (cards[0]) {
      openContentText.innerHTML = '<h1>'+card.children[2].textContent+'</h1>'+paragraphText0;
      openContentImage.src = card.children[1].src;
      } else if (cards[1]) {
        openContentText.innerHTML = '<h1>'+card.children[2].textContent+'</h1>'+paragraphText1;
        openContentImage.src = card.children[1].src;
      }

if（卡[0]）{
openContentText.innerHTML=''+card.children[2].textContent+''+paragraphText0；
openContentImage.src=card.children[1].src；
}else if（卡片[1]）{
openContentText.innerHTML=''+card.children[2].textContent+''+paragraphText1；
openContentImage.src=card.children[1].src；
}

此解决方案与此代码笔一样，没有保持良好的实践。您绝对不应该通过JS放置属于HTML的内容。然而，我不喜欢重写所有的东西，这是让它按照你想要的方式工作的最简单的方法。我只是创建了4个变量，您需要将内容放入其中。然后在HTML中使用

数据id

属性来区分这些卡。单击传递

card

DOM元素，我们只需要访问

数据id

=>

var cardd=card.getAttribute（'data-id'）

。然后将该数字（顺便说一句，访问时它是字符串的类型）分配给变量name=>

eval（'paragraphText'+cardId）。函数
eval（）
尝试以JS代码段的形式运行您传递给它的任何内容，以便它获取带有变量名称的字符串，例如
'paragraphText1'
，并将其转换为JS变量
paragraphText1


//在此处列出变量，使其位于全局范围内
var卡、NCARD、封面、openContent、openContentText、pageIsOpen=false、，
openContentImage、closeContent、windowWidth、windowHeight、currentCard；
//启动流程
init（）；
函数init（）{
调整大小（）；
选择元素（）；
附件侦听器（）；
}
//选择DOM中要使用的所有元素
函数selectElements（）{
cards=document.getElementsByClassName（'card'），
nCards=卡片长度，
cover=document.getElementById（'cover'），
openContent=document.getElementById（'open-content'），
openContentText=document.getElementById（'open-content-text'），
openContentImage=document.getElementById（'open-content-image'））
closeContent=document.getElementById（'close-content'）；
}
/*在此处附加三个事件侦听器：
-每个卡的单击事件侦听器
-单击事件侦听器以关闭按钮
-窗口上的调整大小事件侦听器
*/
函数attachListeners（）{
对于（变量i=0；ifunction getFullText(cardIndex) {
  switch (cardIndex) {
    case 0:
      return (
        "Somebody once told me the world is gonna roll me. " +
        "I ain't the sharpest tool in the shed. " +
        "She was looking kind of dumb with her finger and her thumb. " +
        'In the shape of an "L" on her forehead.'
      );
    case 1:
      return (
        "Well the years start coming and they don't stop coming. " +
        "Fed to the rules and I hit the ground running. " +
        "Didn't make sense not to live for fun. " +
        "Your brain gets smart but your head gets dumb."
      );
    case 2:
      return (
        "So much to do, so much to see. " +
        "So what's wrong with taking the back streets? " +
        "You'll never know if you don't go. " +
        "You'll never shine if you don't glow."
      );
    case 3:
      return (
        "It's a cool place and they say it gets colder. " +
        "You're bundled up now, wait till you get older. " +
        "But the meteor men beg to differ. " +
        "Judging by the hole in the satellite picture."
      );
    default:
      throw new Error("unknown card index", cardIndex);
  }
}

function onCardClick(card, i) {
  var fullText = getFullText(i);
  // set the current card
  currentCard = card;
  // add the 'clicked' class to the card, so it animates out
  currentCard.className += " clicked";
  // animate the card 'cover' after a 500ms delay
  // pass the index
  setTimeout(function() {
    animateCoverUp(currentCard, fullText);
  }, 500);
  // animate out the other cards
  animateOtherCards(currentCard, true);
  // add the open class to the page content
  openContent.className += " open";
}

function animateCoverUp(card, fullText) {
  // get the position of the clicked card
  var cardPosition = card.getBoundingClientRect();
  // get the style of the clicked card
  var cardStyle = getComputedStyle(card);
  setCoverPosition(cardPosition);
  setCoverColor(cardStyle);
  scaleCoverToFillWindow(cardPosition);
  // update the content of the opened page
  openContentText.innerHTML =
    "<h1>" + card.children[2].textContent + "</h1>" + fullText;
  openContentImage.src = card.children[1].src;
  setTimeout(function() {
    // update the scroll position to 0 (so it is at the top of the 'opened' page)
    window.scroll(0, 0);
    // set page to open
    pageIsOpen = true;
  }, 300);
}