如果使用javascript括号则打开

Question

I'm trying to execute a HTML code if there is variable in JS, is there something like in PHP, where you can use

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

so in JS

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

or it has to been done like this

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

Problem is if I use prepend or innerHTML to insert my "image" that function which is called after click to the image - image.addEventListener('click', function() stop work :/

Thank you :)

Answer 1

Well last one is correct one but you can simplify it:

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

Problem is if I use prepend or innerHTML to insert my "image" that function which is called after click to the image - image.addEventListener('click', function() stop work :/

That could be because of dynamically element's creation, you can sort it out with event delegation.

With jQuery:

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

With javascript it is little bit different, .querySelectorAll() returns a collection with is array like object, so iteration needs to be there, Collection.forEach(cb) can be used to bind the event:

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

And with js all the events are delegated events.

Answer 2

Try this:

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

Comment:
This will only change the picture attribute , not the entire <img... /> element. So, events attached to the img element will be preserved .

Answer 3

I assume that you want to check if your variable is boolean and you want to check if it is true. Also i assume that you have several images and you want to prepend new one to them, then you could do:

Create hidden div on the page, Something like this:

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

Inside your javascript code do something like this:

<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>

The idea is that whether you use innerHTML or prepending string with jquery, you have to take whole innerHTML, prepend string to it and then reinsert whole content again. As you undoubtedly can see, this "kills" all handlers added from javascript and you have to reattach them again.

To avoid this, we create dom from string "somewhere else" and then prepend it as a dom child element.