Question

我正在尝试制作我的程序，以便在点击下雪按钮时程序开始加载照片顶部的雪花图像，由于某种原因，我甚至无法使按钮单击功能起作用。我将不胜感激任何帮助。

<!doctype html>
<html>
<body>
<button type="button" id ="button1">Snowing</button>
<button type="button" id ="button2">Stop</button>
<div id = "div1"><img src="http://static.boredpanda.com/blog/wp-content/uuuploads/winter-landscapes/winter-landscapes-20.jpg"; height="500"; width="700"></img></div>
<img src="http://www.clipartkid.com/images/204/simple-christmas-snowflake-icon-png-clipart-image-iconbug-com-IFd3i8-clipart.png" id = "sf1" height="50"; width="50;"></img>
<script src="jquery-3.1.1.min.js">
$(document).ready(function(){
    $("#button1").click(function(){
        $('#div1').prepend($('<img>',{id:'sf1',src:'http://www.clipartkid.com/images/204/simple-christmas-snowflake-icon-png-clipart-image-iconbug-com-IFd3i8-clipart.png'}))
    });
    $("#button2").click(function(){

    });
}
</script>
</body>
</html>

Answer 1

这应该会让你朝着正确的方向前进，你的HTML和JavaScript会出现很多错误 - IDE可能会帮助你突出这些错误。

HTML：

<button type="button" id="button1">Snowing</button>
<button type="button" id="button2">Stop</button>
<div id="div1">
  <img src="http://static.boredpanda.com/blog/wp-content/uuuploads/winter-landscapes/winter-landscapes-20.jpg" height="500" width="700">
</div>

JS：

$('#button1').click(function() {
    $('#div1').prepend('<img src="http://www.clipartkid.com/images/204/simple-christmas-snowflake-icon-png-clipart-image-iconbug-com-IFd3i8-clipart.png">');
});

您的javascript的主要问题是您执行了.prepend($('<img>'而不是.prepend('<img>'。

小提琴：https://jsfiddle.net/KyleMuir/Lo74o6sh/2/

无法在jQuery中插入图像

1 个答案: