(jQuery) 如何为脚本设置“onclick”按钮？

Question

请原谅我，因为我是 jQuery 新手。我正在创建一个脚本，它在点击时更改页面的背景图像。尽管从我能找到的所有教程中，我对如何将单词设置为“onclick”并不明智。为方便起见，这是我更改背景图像的脚本：

<script>
$(function() {
    $('pixture').click(function() {
        $(this).css('background-image', 'url(resources/pixture.png)');
    });
}):
</script>

这是我尝试添加按钮的地方（我的失败代码）：

<h1>
    <center>
        <font face="Lithos">
            <font color="#FF0000">
                <p class="black-text-shadow">
                    <a onclick="pixture">TOGGLE BACKGROUND PIXTURE</a>
                </p>
            </font>
    </center>
</h1>

如果有人可以帮助我如何正确地将“onclick”功能添加到“TOGGLE Background PIXTURE”，我将不胜感激。

Answer 1

你改变了锚点

<a onclick="pixture">TOGGLE BACKGROUND PIXTURE</a>

到一些容易选择的东西，比如一个 ID 或一个类

<a id="pixture">TOGGLE BACKGROUND PIXTURE</a>

然后你选择它

$('#pixture').on('click', function() {
    $('body').css('background-image', 'url(resources/pixture.png)');
});

另请注意，<center> 和 <font> 标记至少在十年前已被弃用，不应使用。

$(function() {
  $('#pixture').click(function() {
    $('body').css('background-image', 'url(https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg)');
  });
});

#pixture {
  margin : 0 auto;
  color : #FF0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1><a id="pixture">TOGGLE BACKGROUND PIXTURE</a></h1>

Answer 2

试试这个，应该很好用

$(function(){
    $('picture').on('click', function(){
        //your action here
    });
});