Fatal编程技术网
  • javascript/
  • Javascript 如何重用HTML片段但更改其中元素的ID

Javascript 如何重用HTML片段但更改其中元素的ID

javascript html

Javascript 如何重用HTML片段但更改其中元素的ID,javascript,html,Javascript,Html,我正在构建一个基于浏览器的鼓机，它允许用户更改单个鼓零件的数量 我有一块HTML，我希望对每个鼓零件重复使用，这允许用户更改鼓的设置。当用户更改鼓零件的数量时，应将此代码段的副本附加到页面中，但每个元素的ID（以及h3标记的内容）反映了它所代表的鼓编号 HTML： <div class="drumSettings" id="drum1Settings"> <h3>Drum 1</h3> <div class="settin

我正在构建一个基于浏览器的鼓机，它允许用户更改单个鼓零件的数量

我有一块HTML，我希望对每个鼓零件重复使用，这允许用户更改鼓的设置。当用户更改鼓零件的数量时，应将此代码段的副本附加到页面中，但每个元素的ID（以及h3标记的内容）反映了它所代表的鼓编号

HTML：

<div class="drumSettings" id="drum1Settings">
        <h3>Drum 1</h3>
        <div class="settings-item">
            <label for="drum1SectorCount">Sectors</label>
            <input type="number" name="drum1SectorCount" id="drum1SectorCount" value="16" min="2" max="32" onchange="redrawDrumLayer(this, 0)">
        </div>
        <div class="settings-item">
            <label for="drum1Sample">Sample</label>
            <select name="drum1Sample" id="drum1Sample" onchange="changeDrumSample(this, 0)">
                    <option value="samples/808 Kick.wav" selected="selected">808 Kick</option>      
                    <option value="samples/808 Snare.wav">808 Snare</option>
                    <option value="samples/808 Closed HiHat.wav">808 Closed HiHat</option>
                    <option value="samples/808 Open HiHat.wav">808 Open HiHat</option>  
                    <option value="samples/808 Clap.wav">808 Clap</option>
                    <option value="samples/808 Low Tom.wav">808 Low Tom</option>
                    <option value="samples/808 Mid Tom.wav">808 Mid Tom</option>
                    <option value="samples/808 High Tom.wav">808 High Tom</option>
                    <option value="samples/808 Cowbell.wav">808 Cowbell</option>
            </select>
        </div>
    </div>


鼓1
部门
样品
808踢
808陷阱
808封闭式HiHat
808开放式HiHat
808拍手
808低汤姆
808中汤姆
808高汤姆
808考贝尔
例如，鼓2的外部div应具有ID“drum2Settings”，输入元素应具有ID“drum2SectorCount”

我已经知道了一种可能的方法：用HTML反复编写代码段（最多允许使用最大数量的鼓），并在需要时更改display属性以隐藏/显示元素，但这将导致一个大的HTML文件（特别是我希望将来为每个鼓添加更多设置）这显然违背了“不要重复自己”的方法论

是否有JavaScript或jQuery方法可以获取第一个代码段并在增加其中的数字的同时进行复制？

查看jQuery中的.clone-您可以克隆html并对其进行编辑，然后再将其重新插入页面中

虽然设置事件监视和获取DOM元素可能会更容易，但实际上并不需要jQuery

//cache these externally, so you can increment the count variable and don't have to declare the other two every time
var count = 1;
var htmlPart1 = '<div class="drumSettings" id="drum1Settings"><h3>Drum ';
var htmlPart3 = '</h3>...' //the rest of the HTML snippet here.
var addDrum = function(){
    //build the html string you want to input
    count++;
    var htmlStr = htmlPart1 + count + htmlPart3;

    //get the DOM object you want to append the html to, append it.
    var container = document.getElementById('container');
    container.innerHTML = container.innerHTML + htmlStr;
};

//this triggers the function, it can be any event you want.
someElement.onclick = addDrum;

//从外部缓存这些变量，这样就可以增加count变量，而不必每次都声明另外两个变量
var计数=1；
变量htmlPart1='鼓'；
var htmlPart3='…'//此处是HTML片段的其余部分。
var addDrum=函数（）{
//构建要输入的html字符串
计数++；
var htmlStr=htmlPart1+count+htmlPart3；
//获取要将html附加到的DOM对象，然后附加它。
var container=document.getElementById（'container'）；
container.innerHTML=container.innerHTML+htmlStr；
};
//这将触发函数，它可以是您想要的任何事件。
someElement.onclick=addDrum；
为了提高性能（和学习！），您可以将字符串列表更改为字符串数组并将它们连接起来。

这里似乎适合使用一些模板引擎，如。您可以从中获取Javascript实现。JS实现手册如下所示

以下是工作（至少在Firefox中）示例：


$（文档）.ready（函数（）{
//发起违约（1）
var template=$（'#template'）.html（）；
parse（模板）；
var rendered=Mustache.render（模板，{num:“1”}）；
var target=$（“#target”）；
html（呈现）；
//按要求追加
$（'#select'）。更改（函数（）{
var n=$（this.val（）；
target.empty（）；

对于（var i=1；我在这里得到了这个想法，但我也希望更改ID。我假设我可以在任何我想添加count变量的地方打断每个字符串。因此htmlPart1（或数组中的第一项）将是
'Drum'
@user3280865是的，你知道了。你可以任意多次分解字符串，在进行时添加动态内容。谢谢。这正是我需要的。我将考虑发出AJAX请求来整理我的HTML

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.1.min.js"></script>
<script src="mustache.js"></script>
<script>
$(document).ready(function () {
    // Initiating default (1)
    var template = $('#template').html();
    Mustache.parse(template);
    var rendered = Mustache.render(template, {num: "1"});
    var target = $('#target');
    target.html(rendered);
    // Appending as required
    $('#select').change(function () {
        var n = $(this).val();
        target.empty();
        for (var i = 1; i <= n; ++i) {
            target.append(Mustache.render(template, {num: i})); 
        }
    });
}); 
</script>
</head>
<body>
<div id="template" style="display:none;">
    <div class="drumSettings" id="drum{{ num }}Settings">
        <h3>Drum {{ num }} </h3>
        <div class="settings-item">
            <label for="drum{{ num }}SectorCount">Sectors</label>
            <input type="number" name="drum{{ num }}SectorCount" id="drum{{ num }}SectorCount" value="16" min="2" max="32" onchange="redrawDrumLayer(this, 0)">
        </div>
        <div class="settings-item">
            <label for="drum{{ num }}Sample">Sample</label>
            <select name="drum{{ num }}Sample" id="drum{{ num }}Sample" onchange="changeDrumSample(this, 0)">
                <option value="samples/808 Kick.wav" selected="selected">808 Kick</option>      
                <option value="samples/808 Snare.wav">808 Snare</option>
                <option value="samples/808 Closed HiHat.wav">808 Closed HiHat</option>
                <option value="samples/808 Open HiHat.wav">808 Open HiHat</option>  
                <option value="samples/808 Clap.wav">808 Clap</option>
                <option value="samples/808 Low Tom.wav">808 Low Tom</option>
                <option value="samples/808 Mid Tom.wav">808 Mid Tom</option>
                <option value="samples/808 High Tom.wav">808 High Tom</option>
                <option value="samples/808 Cowbell.wav">808 Cowbell</option>
            </select>
        </div>
    </div>
</div>
Choose drums amount <select id="select" name="drums">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<div id="target"></div>
</body>
</html>