Question

我们有一个相当简单的函数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。

Answer 1

这是我为了解你的代码而创建的jsfiddle链接（https://jsfiddle.net/abhishekraj007/w3m3r8oL/12/）。在这里，我在传递功能及其工作时硬编码了独特的ID。像这样：

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

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

Answer 2

我已经从您的代码中创建了一个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是否真的独一无二？

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

2 个答案:

JS

HTML