变化选择框和标签ID

我有与内容从JS对象替换HTML字符串占位符的功能：变化选择框和标签ID

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>

一切都OK，点击只在第一卡牌效果的复选框时，当它加载所有卡的所有复选框除外！所以我认为这是因为它们都具有相同的“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", "..."] 
}

来源

2017-10-16 Steve Medley

我没有实现的想法，但也许我可以帮助你。你能展示一下'storyQuests'和'mainCardHTML'的值吗（可能只有几张卡就足够了）？另一方面，你能否澄清一下当你点击一个复选框（改变颜色，显示一条消息等）以及现在发生了什么时，应该发生什么？ –

@ A.Iglesias请参阅编辑1的代码帖子。当你检查这个盒子时应该检查什么。目前它或者什么也不做，或者它只改变了第一张生成的卡片中复选框的选中/未选中状态。 –

好的。我已经发布了一个答案。看看它，让我知道它是怎么回事 –

首先稍微注意一下，查看mainCardHTML的HTML代码，有两个<p>元素未关闭（没有</p>），并且一些html属性没有'的值。

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

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

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

有了这一切，你的替换代码工作没有小提琴问题...

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

来源

2017-10-17 05:28:46

变化选择框和标签ID

回答

相关问题