Question

我有一个函数正在用HTML对象中的内容替换HTML字符串中的占位符：

function inputCards() {
    $('#maincontent').empty();
    storyQuests.name.forEach(function(val, i) {
        var formattedCard = mainCardHTML.replace('%questName%', storyQuests.name[i])
                                        .replace('%questChapter%', storyQuests.chapter[i])
                                        .replace('%questImg%', storyQuests.img[i])
                                        .replace('%questDescription%', storyQuests.description[i])
                                        .replace('replaceBox', storyQuests.check[i]);
        $('#maincontent:last').append(formattedCard);
    })
}

这就是现在的代码，我遇到的问题是我使用的是物理化，而卡片上的复选框代码是：

<div class="card-action">
  <form action="#">
    <p>
      <input type="checkbox" id="replaceBox" />
      <label for="replaceBox" class="white-text">Complete!</label>
    </p>
  </form>
</div>

页面上的所有内容都正常，除非它加载所有卡片时单击所有复选框仅影响第一张卡片中的复选框！所以我认为这是因为它们都具有相同的“replaceBox”ID。所以我添加了这个来解决它：

.replace('replaceBox', storyQuests.check[i]);

（实际上我开始使用其他根本不起作用的东西，尝试了其他几种方法，并最终放弃并在我的对象中创建了一个额外的项目来保存引用的复选框ID：

check: ['box0', 'box1', 'box2', 'box3', 'box4', 'box5', 'box6', 'box7', 'box8', 'box9', 'box10', 'box11', 'box12', 'box13', 'box14', 'box15', 'box16', 'box17', 'box18', 'box19', 'box20', 'box21', 'box22', 'box23', 'box24', 'box25', 'box26', 'box27', 'box28', 'box29', 'box30', 'box31', 'box32', 'box33', 'box34', 'box35', 'box36', 'box37', 'box38', 'box39', 'box40', 'box41', 'box42']

但是，即使.replace可以在其他所有内容上运行，但在这些ID上似乎没有，它会阻止所有复选框工作，并且控制台显示此错误：

GET file:///A:/sites/mysite-com/undefined
net::ERR_FILE_NOT_FOUND

所以最终，我如何用不同的值替换单词“replaceBox”，或者老实说任何其他解决方案，以允许独立检查每个复选框。我想在复选框上删除任何ID，但我觉得我将来需要它们，因为我打算让人们登录并让它保存每张卡的检查状态。

编辑1： mainCardHTML代码：

var mainCardHTML = "<div class='col hide-on-small-only m3'>&nbsp;</div>" +
                   "<div class='col s6'>" +
                     "<h5 class='header xvred-text'id='replaceMe'>%questName%</h5>" +
                     "<h6 class='header xvblue-text'id='replaceMe'>%questChapter%</h6>" +
                     "<div class='card horizontal hoverable'>" +
                       "<div class=card-image><img id='replaceMe' src=%questImg%></div>" +
                       "<div class='card-stacked xvred'>" +
                         "<div class='card-content xvblue'>" +
                           "<p id='replaceMe'>%questDescription%" +
                         "</div>" +
                         "<div class=card-action>" +
                           "<form action=#>" +
                             "<p><input id='replaceBox' type=checkbox>" +
                             "<label class=white-text for='replaceBox'>Complete!</label>" +
                           "</form>" +
                         "</div>" +
                       "</div>" +
                     "</div>" +
                   "</div>" +
                   "<div class='col hide-on-small-only m3'>&nbsp;</div>"

storyQuests对象（为了便于阅读，实际的对象是在这里发布的方式，所以我替换了字符串）：

var storyQuests = {
    name: ["43 strings", "43 strings", "..."],
    chapter: [43 numbers, 43 numbers, ...],
    img: ["43 strings", "43 strings", "..."],
    description: ["43 strings", "43 strings", "..."]
    check: ["box0", "box1", "..."]
}

Answer 1

首先请注意，查看mainCardHTML的HTML代码，有两个<p>元素未公开（无</p>），而某些html属性没有' 1}}在他们的价值观中。

在storyQuests对象中，check字段前没有逗号。这可能是在问题中粘贴代码的错字，但要验证它。

Javascript函数replace默认只替换单词的第一个外观。在您的情况下，每张卡上有两个replaceBox，因此您应该使用...

.replace(/replaceBox/g, storyQuests.check[i]

有了这一切，您的替换代码可以毫无问题地工作......

https://fiddle.jshell.net/rigobauer/v8erbuur/

更改ID

1 个答案: