All geek questions in one place

How to enter function changes?

How can I put var this in attr in the picture?
because it has been replaced with innerHTML

<!DOCTYPE html>
<html>
<head><script type="text/javascript" src="http://line25.com/wp-content/uploads/2010/jquery-lightbox/demo/js/jquery.js"></script>
</head>
<body>
<button href="http://allcartooncharacters.com/wp-content/uploads/2014/05/Tweety-310x310.png">Try it</button>

<p id="demo">
<img src="http://www.w3schools.com/jquery/img_pulpitrock.jpg" alt="Pulpit Rock" width="284" height="213">
</p>

<script>
$(document).ready(function() {
   $('button').click(function() {
       var this = $("button")[0].getAttribute("href"); 
       $("#demo img").attr("src", '+ var this +');
   });
});
</script>
</body>
</html>

But what if I want to add a download function? perhaps if the image is successfully opened, the download will disappear as follows

if (loading) {
    $(".loading-picture-gif").show();
} 
else {
    $(".loading-picture-gif").hide();
}
+4
source share
2 answers

You cannot use a thisvariable name as a name, and even if it is possible, this is probably not a good idea. I would make your code look like

$("button").click(function() {
    var newSrc = $("button")[0].getAttribute("href");
    $("#demo img").attr("src", newSrc);
});

/ , .on("load"... src . :

$('button').click(function() {
    var newSrc = $("button")[0].getAttribute("href");
    $(".loading-picture-gif").show();
    $("#demo img").on("load", function() {
      $(".loading-picture-gif").hide();
    }).attr("src", newSrc);
});

+1

this - , ,

$(document).ready(function() {
   $('button').click(function() {
       var href = $(this).attr("href");
       $("#demo img").attr("src", href);
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button href="http://allcartooncharacters.com/wp-content/uploads/2014/05/Tweety-310x310.png">Try it</button>

<p id="demo">
<img src="http://www.w3schools.com/jquery/img_pulpitrock.jpg" alt="Pulpit Rock" width="284" height="213">
</p>
Hide result
+1

Source: https://habr.com/ru/post/1621174/

More articles:


All Articles