如果使用javascript括号则打开

Question

我正在尝试执行HTML代码，如果JS中有变量，是否有类似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插入我的“图像”，即单击图像后调用的函数-image.addEventListener（'click'，function（） stop work：/

谢谢 ：）

Answer 1

好吧，最后一个是正确的，但是您可以简化一下：

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

问题是如果我使用prepend或innerHTML插入我的“图像”，即单击图像后调用的函数-image.addEventListener（'click'，function（）stop work：/

那可能是由于动态元素的创建，您可以使用事件委托对其进行分类。

使用jQuery：

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

与javascript稍有不同， .querySelectorAll()返回的集合类似于is对象的数组，因此需要迭代， 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>

评论：
这只会更改picture属性 ，而不更改整个<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 else”创建dom，然后将其作为dom子元素放在前面。