index.html到jquery

Question

我如何在jquery中写这个？我想在点击块中在div块内显示600x400图像？

<script>
function displayImage() {
 document.getElementById("demo").innerhtml ="image.jpg";

}
</script>

<form>

<input type="submit" onClick="displayImage()">
</form>

<div id="demo">

</div>

Answer 1

$("#demo").html("image.jpg");

但是，“image.jpg”不是HTML。所以你应该使用：

$("#demo").text("image.jpg");

如果您尝试将图像添加到div，请使用：

$("#demo").html('<img src="image.jpg" />');

Answer 2

假设您希望仅图像显示在#demo中（并且还假设您希望在表单提交时发生这种情况）：

$('form').submit(
    function() {
        $('#demo').html('<img src="path/to/image.jpg" />');
        return false;
    }
);

相反，如果您希望将图像添加到#demo（尽管仍然假设这是在提交表单上）：

$('form').submit(
    function() {
        $('<img src="path/to/image.jpg" />').appendTo('#demo');
        return false;
    }
);

---

快速说明，但似乎值得一提：

1. 上述所有内容都需要$(document).ready(/*...*/)（或等效的）。
2. 如果使用上述内容，则不再需要onClick内联点击处理程序，如果问题仍然存在，可能会使问题变得复杂。

Answer 3

假设您希望显示图像...将您的html更改为：

<input type="submit" id="SubmitButtonId" />
<img id="demo" src="someimage.jpg" />

和你的javascript：

<script>

    $(function(){
        $('#SubmitButtonId').live('click', function(){
            $('#demo').src('image.jpg');
        });
    });
</script>