我只是在编写这个脚本,但我无法弄清楚为什么它不会运行!任何帮助表示赞赏。
的Javascript
$(document).ready(function() {
var str = document.getElementById('size').innerHTML;
var res = str.replace('<p>','<input type="checkbox" value="');
var res = str.replace('</p>','" id="size" name="size[]" checked />');
document.getElementById('size').innerHTML=res;
});
HTML
<div id="size">
<p>xs</p>
<p>s</p>
<p>m</p>
<p>l</p>
<p>xl</p>
</div>
这是JS小提琴:http://jsfiddle.net/L2LGV/
答案 0 :(得分:6)
你尝试这样做的方式并不是最好的方式。
请参阅我如何实施它的快速示例。
$(document).ready(function() {
jQuery('#size p').each(function(){
var html = '<input type="checkbox" value="' + jQuery(this).text() + 'id="size" name="size[]" checked />';
jQuery(this).replaceWith(html);
});
});
答案 1 :(得分:1)
首先,不包括jQuery。
然后在这里你的代码做什么:
var res = str.replace('<p>','<input type="checkbox" value="');
// replace str which is equal to <p>...</p> to <input type="checkbox" value="...</p>
var res = str.replace('</p>','" id="size" name="size[]" checked />');
// replace str which is equal to <p>...</p> to <p>" id="size" name="size[]" checked />
请尝试使用此代码:
var res = str.replace('<p>','<input type="checkbox" value="');
var res = res.replace('</p>','" id="size" name="size[]" checked />');
另外,如果要替换每次出现,请使用regexp:
var res = str.replace(/<p>/g,'<input type="checkbox" value="');
var res = res.replace(/<\/p>/g,'" id="size" name="size[]" checked />');
答案 2 :(得分:1)
1,你通过声明两次来覆盖res变量:
var res = str.replace('<p>','<input type="checkbox" value="');
var res = str.replace('</p>','" id="size" name="size[]" checked />');
应该是:
var res = str.replace('<p>','<input type="checkbox" value="');
res += str.replace('</p>','" id="size" name="size[]" checked />');
其次,你不包括jquery。
请注意using innerHTML is a bad idea!使用jQuery的html函数。最后但同样重要的是:当您选择getElementById
的元素时,为什么要使用jQuery?!?使用$('#<id>')
..
答案 3 :(得分:1)
这是一个没有str.replace()
的解决方案:
$(document).ready(function() {
var list = document.getElementById('size').getElementsByTagName('p'), output = '';
for(var i = 0; i < list.length; ++i){
output += '<input type="checkbox" value="';
output += list[i].innerHTML;
output += '" id="size" name="size[]" checked />';
}
document.getElementById('size').innerHTML=output;
});