我正在为我工作的公司制作展开/折叠通话费率表。我目前有一个表格，下面有一个按钮来展开它，按钮上写着“展开”。它是功能性的，除了我需要在单击它时将按钮更改为“折叠”，然后在再次单击它时返回到“展开”。按钮上的文字是背景图片。
所以基本上我只需要在单击 div 时更改它的背景图像，除了有点像切换。
【问题讨论】：
Aug 9 '10 at 0:42 在 SO 也许这就是原因，:(
标签： jquery
$('#divID').css("background-image", "url(/myimage.jpg)");
应该做到这一点，只需将其连接到元素上的点击事件中
$('#divID').click(function()
{
// do my image switching logic here.
});
【讨论】：
我个人只会使用 JavaScript 代码在 2 个类之间切换。
让 CSS 在 div 上勾勒出您需要的所有内容，减去背景规则，然后添加两个类（例如：展开和折叠）作为规则，每个类都具有正确的背景图像（或使用精灵时的背景位置）。
具有不同图像的 CSS
.div {
/* button size etc properties */
}
.expanded {background: url(img/x.gif) no-repeat left top;}
.collapsed {background: url(img/y.gif) no-repeat left top;}
或带有图像精灵的CSS
.div {
background: url(img/sprite.gif) no-repeat left top;
/* Other styles */
}
.expanded {background-position: left bottom;}
那么……
带有图像的 JavaScript 代码
$(function){
$('#button').click(function(){
if($(this).hasClass('expanded'))
{
$(this).addClass('collapsed').removeClass('expanded');
}
else
{
$(this).addClass('expanded').removeClass('collapsed');
}
});
}
带有精灵的 JavaScript
注意：优雅的 toggleClass 在 Internet Explorer 6 中不起作用，但下面的 addClass/removeClass 方法在这种情况下也可以正常工作
最优雅的解决方案（遗憾的是对 Internet Explorer 6 不友好）
$(function){
$('#button').click(function(){
$(this).toggleClass('expanded');
});
}
$(function){
$('#button').click(function(){
if($(this).hasClass('expanded'))
{
$(this).removeClass('expanded');
}
else
{
$(this).addClass('expanded');
}
});
}
据我所知，这种方法可以跨浏览器使用，而且我会觉得使用 CSS 和类比使用脚本中的 URL 更改更舒服。
【讨论】：
使用 jQuery 更改背景图像 CSS 有两种不同的方法。
$('selector').css('backgroundImage','url(images/example.jpg)');$('selector').css({'background-image':'url(images/example.jpg)'});仔细观察并注意差异。第二种，您可以使用常规的 CSS 并将多个 CSS 属性串在一起。
【讨论】：
如果您对背景图像使用 CSS 精灵，则可以根据您是展开还是折叠来增加背景偏移量 +/- n 个像素。不是切换，但比切换背景图像 URL 更接近它。
【讨论】：
这是我的做法：
CSS
#button{
background-image: url("initial_image.png");
}
#button.toggled{
background-image:url("toggled_image.png");
}
JS
$('#button').click(function(){
$('#my_content').toggle();
$(this).toggleClass('toggled');
});
【讨论】：
.toggleClass() 功能。
这样做的一种方法是将两个图像放在 HTML 中，在 SPAN 或 DIV 中，您可以使用 CSS 或在页面加载时使用 JS 隐藏默认值。然后你可以点击切换。这是我用来将左/下图标放在列表中的类似示例：
$(document).ready(function(){
$(".button").click(function () {
$(this).children(".arrow").toggle();
return false;
});
});
<a href="#" class="button">
<span class="arrow">
<img src="/images/icons/left.png" alt="+" />
</span>
<span class="arrow" style="display: none;">
<img src="/images/down.png" alt="-" />
</span>
</a>
【讨论】：
我的是动画的：
$(this).animate({
opacity: 0
}, 100, function() {
// Callback
$(this).css("background-image", "url(" + new_img + ")").promise().done(function(){
// Callback of the callback :)
$(this).animate({
opacity: 1
}, 600)
});
});
【讨论】：
这适用于 WinXP 上的所有当前浏览器。基本上只是检查当前背景图像是什么。如果是image1，则显示image2，否则显示image1。
jsapi 只是从 Google CDN 加载 jQuery（更容易在桌面上测试 misc 文件）。
替换是为了跨浏览器的兼容性（opera 和ie 添加引号到url 和firefox、chrome 和safari 删除引号）。
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.2.6");
google.setOnLoadCallback(function() {
var original_image = 'url(http://stackoverflow.com/Content/img/wmd/link.png)';
var second_image = 'url(http://stackoverflow.com/Content/img/wmd/code.png)';
$('.mydiv').click(function() {
if ($(this).css('background-image').replace(/"/g, '') == original_image) {
$(this).css('background-image', second_image);
} else {
$(this).css('background-image', original_image);
}
return false;
});
});
</script>
<style>
.mydiv {
background-image: url('http://stackoverflow.com/Content/img/wmd/link.png');
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="mydiv"> </div>
</body>
</html>
【讨论】：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
我使用正则表达式完成了我的工作，因为我想保留相对路径而不是使用添加 addClass 函数。我只是想让它变得复杂，哈哈。
$(".travelinfo-btn").click(
function() {
$("html, body").animate({scrollTop: $(this).offset().top}, 200);
var bgImg = $(this).css('background-image')
var bgPath = bgImg.substr(0, bgImg.lastIndexOf('/')+1)
if(bgImg.match(/collapse/)) {
$(this).stop().css('background-image', bgImg.replace(/collapse/,'expand'));
$(this).next(".travelinfo-item").stop().slideToggle(400);
} else {
$(this).stop().css('background-image', bgImg.replace(/expand/,'collapse'));
$(this).next(".travelinfo-item").stop().slideToggle(400);
}
}
);
【讨论】：
旧帖子，但这将允许您使用图像精灵并通过使用 css 属性的简写（背景、重复、左上角）来调整重复和定位。
$.each($('.smallPreview'), function(i){
var $this = $(this);
$this.mouseenter(function(){
$this.css('background', 'url(Assets/imgs/imgBckg-Small_Over.png) no-repeat 0 0');
});
$this.mouseleave(function(){
$this.css('background', 'url(Assets/imgs/imgBckg-Small.png) no-repeat 0 0');
});
});
【讨论】：
我在论坛中找到了解决方案，Toggle Background Img。
【讨论】：
CSS Sprite 效果最好。我尝试使用 jQuery 切换类并操作“背景图像”属性，但没有任何效果。我认为这是因为浏览器（至少是最新的稳定版 Chrome）无法“重新加载”已加载的图像。
奖励：CSS Sprite 的下载速度和显示速度更快。更少的 HTTP 请求意味着更快的页面加载。减少 HTTP 的数量是提高前端性能的最佳方法，所以我建议一直走这条路线。
【讨论】：
这是一个相当简单的响应，通过项目列表更改站点的背景
function randomToN(maxVal) {
var randVal = Math.random() * maxVal;
return typeof 0 == 'undefined' ? Math.round(randVal) : randVal.toFixed(0);
};
var list = [ "IMG0.EXT", "IMG2.EXT","IMG3.EXT" ], // Images
ram = list[parseFloat(randomToN(list.length))], // Random 1 to n
img = ram == undefined || ram == null ? list[0] : ram; // Detect null
$("div#ID").css("backgroundImage", "url(" + img + ")"); // push de background
【讨论】：
我也总是使用时间戳来防止浏览器缓存图像。例如，如果用户正在旋转他们的头像，它通常会被缓存并且看起来不会改变。
var d = new Date();
var t = d.getTime();
$('#avatar').css("background-image", "url(" + iPath + "?" + t + ")");
【讨论】：