使用变量将 HTML 块附加到选择器答案

【问题标题】：Appending HTML Block to Selector with Variables使用变量将 HTML 块附加到选择器
【发布时间】：2018-09-01 06:30:08
【问题描述】：

我们有一个名为alert 的相当简单的函数，它基本上在任何时候触发它都会创建一个警报卡（HTML 元素）。作为参考，我们使用 Eel 从 Python 传递变量并在 chrome 包装器中运行它。

<script type="text/javascript">

    eel.expose(alert);

    function alert(serial, time_key, card_color, screen_msg, ping) {
        //clone card_template for each new alert
        var clone = $("#card_template").clone();
        clone.attr("id", serial);
        clone.find("#message-card").attr("id", "message-card-" + serial + "-" + time_key);
        clone.find("#python-data").attr("id", "python-data-" + serial + "-" + time_key);
        //append clone on the end
        $("#message-zone").prepend(clone);

        document.getElementById("message-card-" + serial + "-" + time_key).classList.remove('bg-info');
        document.getElementById("message-card-" + serial + "-" + time_key).className += card_color;
        document.getElementById("python-data-" + serial + "-" + time_key).innerHTML = screen_msg;

        var button_template = '<button type="button" class="btn btn-sm btn-danger">Clear</button>';
        var selector_id = 'python-data-' + serial + '-' + time_key;
        // $('#python-data-'+ serial + '-' + time_key).append(button_template);
        $('#'+ selector_id).append(button_template);
        $('#python-data').append(button_template);

        if (ping === true)
            document.getElementById('alert').play();
    }

</script>

它会根据收到的警报类型克隆和更改此元素。

       <div class="row justify-content-center" id="card_template">
            <div class="col-md-8">
                <div class="card bg-info" id="message-card">
                    <div class='card-body' id="python-data">
                        No messages
                    </div>
                </div>
            </div>
        </div>

所以这就是我们失去它的地方。我们希望在卡片被克隆并赋予唯一的 id 后将 HTML 块附加到卡片上。我们创建了一个包含该代码块的变量button_template。我们可以很容易地将此代码块插入到具有硬编码 id 的元素中。

例如：

$('#python-data').append(button_template);

将代码块附加到原始（克隆源）卡中的#python-data div。

但是当我们的选择器从变量中组装时，我们似乎无法让它工作（必须解决具有唯一 ID 的克隆警报卡）。

都不是：

var selector_id = 'python-data-' + serial + '-' + time_key;
$('#'+ selector_id).append(button_template);

或

$('#'+ 'python-data-' + serial + '-' + time_key).append(button_template);

适用于新克隆的卡片。

TLDR 此功能的其他所有功能均有效。它克隆我们的起始元素，给它和它的子元素，一个唯一的 id（从变量组装），删除一个类，添加一个类并向最里面的 div 写入一条消息。这一切都有效。我们需要帮助的只是将 HTML 块附加到具有唯一的、基于变量的 id 的 div 中。

【问题讨论】：

能否请您创建一个小提琴以更好地理解代码？
在调用alert 函数时是否传递参数值？因为如果您默认不传递任何值，它将undefined 并且您的变量连接将类似于#python-data+undefined+undefined
@SmitRaval 这不太实用，因为它根本不会运行，因为变量是通过 Eel 从 Python 获取的。我会尝试重写一个仅 JS 的版本，但对于这个基本的问题来说，这有点矫枉过正。我只是想在选择器中使用变量，我确信这就是我犯错的地方。整个函数的其余部分运行完美。
@AbhishekRaj 是的。函数alert 中的变量具有值。它们是通过 Eel 从 python 传递的。
@Jon 在下面查看我的答案。

标签： javascript jquery jquery-selectors

【解决方案1】：

我已经根据您的代码创建了一个 codepen，它在那里工作正常。问题一定是代码中的其他地方。

我的代码。

JS

var serial = "123";
var time_key = "67868678";
var card_color = "bg-warning";
var screen_msg = "This is new message";
var clone = $("#card_template").clone();
        clone.attr("id", serial);
        clone.find("#message-card").attr("id", "message-card-" + serial + "-" + time_key);
        clone.find("#python-data").attr("id", "python-data-" + serial + "-" + time_key);
        //append clone on the end
        $("#message-zone").prepend(clone);

document.getElementById("message-card-" + serial + "-" + time_key).classList.remove('bg-info');
 document.getElementById("message-card-" + serial + "-" + time_key).className += " "+card_color;
        document.getElementById("python-data-" + serial + "-" + time_key).innerHTML = screen_msg;
var button_template = '<button type="button" class="btn btn-sm btn-danger">Clear</button>';
var selector_id = 'python-data-' + serial + '-' + time_key;
$('#'+ selector_id).append(button_template);
 $('#python-data').append(button_template);

HTML

 <div class="row justify-content-center" id="card_template">
            <div class="col-md-8">
                <div class="card bg-info" id="message-card">
                    <div class='card-body' id="python-data">
                        No messages
                    </div>
                </div>
            </div>
        </div>
<div id="message-zone"></div>

这是codepen。

我认为这个问题与重复 ID 有关。您能否检查一下您生成的唯一 ID 是否真的是唯一的？

【讨论】：

【解决方案2】：

这是我为理解您的代码而创建的 jsfiddle 链接 (https://jsfiddle.net/abhishekraj007/w3m3r8oL/12/)。在这里，我在传递给函数及其工作时对唯一 ID 进行了硬编码。像这样的：

aalert("serial1", "a", "blue", "message", true)
aalert("serial2", "b", "blue", "message", true)

我更改了函数名称，因为 alert 是保留的 Javascript 函数。如果这不是您想要的，请检查并告诉我。

【讨论】：