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 を独学で 2 か月間学習しようとしていることにも注意してください。ヘルプ/ガイダンスは大歓迎です。
前もってありがとう、カウシク
上記の問題を解決できました。問題は、私が使用していた 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));
});
});
});