Question

如果JS中有变量，我试图执行HTML代码，是否有类似PHP的东西，你可以使用

<?php
if ($variable == True) { ?>
<img src="image.jpg">
<?php } else { ?>
<img src="image2.jpg">
<?php } ?>

所以在JS

<script>
if (variable == true) {
</script>
<img src="image.jpg">
<script>
} else {
</script>
<img src="image2.jpg">
<script>
}
</script>

或者必须像这样完成

<script>
if (variable == true) {
$("#element").prepend("<img src='image.jpg'>");
} else {
$("#element").prepend("<img src='image2.jpg'>");
};
</script>

问题是如果我使用prepend或innerHTML来插入我的＆＃34;图像＆＃34;单击图像后调用的函数 - image.addEventListener（＆＃39;点击＆＃39;，函数（）停止工作：/

谢谢:)

Answer 1

最后一个是正确的，但你可以简化它：

var src = variable === true ? "image" : "imgage2";
$("#element").prepend('<img src="'+ src +'.jpg">');

问题是，如果我使用prepend或innerHTML来插入我的＆＃34;图像＆＃34;单击图像后调用的函数 - image.addEventListener（＆＃39;单击＆＃39;，函数（）停止工作：/

这可能是因为动态元素的创建，您可以使用事件委派对其进行排序。

使用jQuery：

$('#element').on('click', 'img', function(e){
     // put code here
});

使用javascript它有点不同，.querySelectorAll()返回一个类似于对象的数组的集合，因此迭代需要在那里，Collection.forEach(cb)可用于绑定事件：

var imgs = document.querySelectorAll('#element img');
Array.forEach.call(imgs, function(img){
  img.addEventListener('click', function(){
    // put code here
  });
});

使用js，所有事件都是委派事件。

Answer 2

试试这个：

<script>
    if (variable == true) {
        $("#element").attr('src', 'image.jpg');
    } else {
        $("#element").attr('src', 'image2.jpg');
    };
</script>

评论：
这将仅更改图片属性，而不是整个<img... />元素。因此，附加到 img 元素的事件将被保留。

Answer 3

我假设您要检查您的变量是否为布尔值，并且您想要检查它是否为真。此外，我假设您有几个图像，并且您想要为它们添加新的图像，然后您可以这样做：

在页面上创建隐藏的div，如下所示：

<div id="htmlToDomCreator" style="position: absolute; top: 0; left: 0; width: 1px; height: 1px; visibility: hidden;" >
</div>

在您的javascript代码中执行以下操作：

<script>

    var htmlToDomCreator = document.getElementById('htmlToDomCreator');
    var yourElement = document.getElementById('element');

    var htmlTag = "";

    if (variable == true) {
        htmlTag ="<img src='image.jpg'>";
    } else {
        htmlTag ="<img src='image2.jpg'>";
    }

    htmlToDomCreator.innerHTML = htmlTag;

    var myImgTag = htmlToDomCreator.firstChild;

    if(yourElement.firstChild){
        yourElement.insertBefore(myImgTag, yourElement.firstChild);
    }else{
        yourElement.appendChild(myImgTag);
    }

    myImgTag.onclick = function() {
        // do click stuff here
    };

</script>

这个想法是你是使用innerHTML还是使用jquery前置字符串，你必须采取整个innerHTML，将字符串前置，然后重新插入整个内容再次。正如你无疑可以看到的，这会“杀死”所有处理程序从javascript添加，你必须重新连接它们。

为避免这种情况，我们从字符串“somewhere”创建dom，然后将其作为dom子元素添加。

在javascript中打开如果括号

3 个答案: