jquery - 用于切换主体背景图像的 Bootstrap 按钮

Question

我正在尝试使用 Bootstrap 按钮切换背景图像。

我有CSS...

body { 
   background-image: url('img/myimage_1.gif');
}

在 HTML 中...

<button type="button" id="bkgchange" class="btn" data-toggle="button">Change the background</button>

在脚本中...

$( 'bkgchange' ).click(function() {
    $( #body ).css( 'background-image', '~/img/myimage_2.gif' );
});

它不起作用？!任何指点。我知道想要弄乱 body 属性是非常规的，我不能将图像作为 div 背景或放在容器中，因为它本身不行为......

替代方案与直接解决方案一样受欢迎。

Answer 1

试试这个

$( '#bkgchange' ).click(function() {
    $('body').css( 'background-image', 'url(/img/myimage_2.gif)' );
});

bkgchange 是按钮的 id，因此如果您想通过 jQuery 访问它，则需要在其前面放置 #。就像 $('#bkgchange') 并且您想从页面访问 body 元素，因此您需要通过 $('body') 访问它> 而不是 $(#body)。

放置background-image时，其模式为url(path-of-image)，并且不能使用~/使用 url 作为 css 不知道它应该引用根目录，您可以尝试使用 / 来引用根目录。