Question

这是为了在按钮下方加载图像。每个按钮加载相同的图像，但具有不同的属性。和颜色一样，在这个例子中。

<html>
<head>
<script type="text/javascript">
$(document).ready(function () {
    $("button").click(function () {
        var imgUrl = $(this).data('rel');
        $("#area").html("<img src='" + imgUrl + "' alt='description' />");
    });
});
</script>
</head>
<body>
<table border="1">
    <tr>
        <td>
            <button data-rel="http://i.imgur.com/icb4onK.jpg">Blue</button>
        </td>
        <td>
            <button data-rel="http://i.imgur.com/3mSS06v.jpg">Red</button>
        </td>
        <td>
            <button data-rel="http://i.imgur.com/Su3Rtoy.jpg">Green</button>
        </td>
    </tr>
</table>
<table>
    <tr>
        <td>
            <div id="area"></div>
        </td>
    </tr>
</table>
</body>
</html>

这可以在这里工作：https://jsfiddle.net/x3QdU/53/

但是当我将Microsoft Notepad文件保存为test.html（我确实选择了所有文件类型）时，它只会加载按钮。按钮什么都不做。我不知道我是如何添加JavaScript的，或者可能是我的浏览器。我使用谷歌浏览器。

我还想知道这段代码是否适用于网站上的HTML应用。

Answer 1

您在代码中缺少jQuery库。

在<script>中的<head>标记之前添加此内容：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

如果您更喜欢jQuery的本地副本，请从https://jquery.org/下载并将其添加到您的项目中。然后使用以下代码：

<script src="path/to/jquery.min.js"></script>

Answer 2

您可能希望在脚本之前包含jQuery。 JSFiddle为您做到这一点，但在您的独立版本上，您应该自己完成。

将它放在您自己的脚本标记之前：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

或从您自己的位置导入jQuery

Answer 3

你不包括jQuery（这是一件好事，因为这里不需要jQuery！）

你可以在没有jQuery的情况下实现相同的功能：

window.addEventListener('load', function() {
    // Create the image
    var img = new Image();
    // And put it in the document
    document.getElementById('area').appendChild(img);

    // Find all the buttons in the document...
    [].forEach.call(document.querySelectorAll('button'), function(button) {
        // Add a click handler on each
        button.addEventListener('click', function(e) {
            // To change the src of the image
            img.src = this.dataset.rel;
        });
    });
});

<强> Here's an example for it in action

如果您坚持使用jQuery，请查看其他任何答案，它们会告诉您如何在文档中包含jQuery。

它在你的jsFiddle中工作的原因是因为你已经将它包含在设置中

jQuery is included

Answer 4

你必须按如下方式添加jquery库，它存在于jsfiddle示例中。

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js"></script>

我似乎无法让这个简单的代码工作

4 个答案: