变化选择框和标签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'> </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'> </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", "..."]
}
答
首先稍微注意一下,查看mainCardHTML
的HTML代码,有两个<p>
元素未关闭(没有</p>
),并且一些html属性没有'
的值。
在您的storyQuests
对象中,您在check
字段之前没有逗号。这可能是一个错误粘贴问题中的代码,但验证它。
Javascript函数replace
默认情况下只替换单词的第一个外观。你的情况,你有两个replaceBox
每个卡上,所以你应该使用...
.replace(/replaceBox/g, storyQuests.check[i]
有了这一切,你的替换代码工作没有小提琴问题...
我没有实现的想法,但也许我可以帮助你。你能展示一下'storyQuests'和'mainCardHTML'的值吗(可能只有几张卡就足够了)?另一方面,你能否澄清一下当你点击一个复选框(改变颜色,显示一条消息等)以及现在发生了什么时,应该发生什么? –
@ A.Iglesias请参阅编辑1的代码帖子。当你检查这个盒子时应该检查什么。目前它或者什么也不做,或者它只改变了第一张生成的卡片中复选框的选中/未选中状态。 –
好的。我已经发布了一个答案。看看它,让我知道它是怎么回事 –