1

我能够在 jQuery 中执行外部 JS 文件（用于渲染化学分子）。但是，当加载外部 JS 文件时，它会覆盖我初始文件中的所有内容。

我应该如何在不覆盖现有 HTML 文件的情况下将外部 JS 文件插入到适当的 DOM 中（在这种情况下，是带有 className“render”的最后一个可用类）？我使用 URL 获取 JSON 格式的数据并使用 .each() 函数解析它，如下所述。

            $(document).ready(function(){
                $.get("someURL", function (json){
                    var obj = $.parseJSON(json);
                    $(".container").append("<ul class =\"items\">");
                    $.each(obj, function(i){
                        name = obj[i].name;
                        mol = obj[i].mol;
                        script = $(document.createElement('script')).attr('type', 'text/javascript').attr('src','js/external.js');  
                        $('ul.items').append('<li><div class="render">');
                        $(script).appendTo(".render:last");
                    });
                });
            });

我的外部 js 文件是，

            transform = new ChemDoodle.TransformCanvas(name, 150, 150, true);
            transform.loadMolecule(ChemDoodle.readMOL(mol));

另外，请注意，我没有编程经验，并尝试自己学习 JS/jQuery 几个月。非常感谢任何帮助/指导。
在此先感谢，考希克

我可以解决上述问题。问题出在我正在使用的 external.js（渲染化合物的 chemdoodle JS）文件中。它在内部呈现化合物结构。由于 chemdoodle 的 JS 组件存在固有问题，它曾经覆盖我的文件（无论我将其称为外部脚本还是内部函数）。我必须显式插入与 chemdoodle 使用的 id 相同的 DOM。这是我所做的，这解决了问题。它也可能对正在使用 chemdoodle 的人有所帮助！

            $(document).ready(function(){
                    function canvasCall(name, mol){

                        transform = new ChemDoodle.TransformCanvas(name, 150, 150, true);
                        transform.specs.bonds_useJMOLColors = true;
                        transform.specs.set3DRepresentation('Stick');
                        transform.specs.atoms_display = false;
                        transform.specs.backgroundColor = 'black'; 
                        transform.specs.bonds_clearOverlaps_2D = true;        
                        transform.loadMolecule(ChemDoodle.readMOL(mol));

                    };

                    $(".container").append("<ul class =\"items\">");

                    $.getJSON(someURL, function (obj){
                        $.each(obj, function(i){
                        var name = obj[i].name;
                        var mol = obj[i].mol;

                        $('ul.items').append("<li><div class=\"render\"><canvas id=\"" + name + "\">");
                        $("#"+name).append(canvasCall(name, mol));
                    });
                });
            });
4

0 回答 0