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
    });
});

（jQuery）如何为脚本设置“onclick”按钮？

2 个答案: