7赞

使用jQuery切换DIV背景图像

作者：mobiledu2402852357 | 2023-09-03 13:32

如何解决《使用jQuery切换DIV背景图像》经验，为你挑选了8个好方法。

我正在为我工作的公司制作扩展/折叠通话费率表.我目前有一个桌子,下面有一个按钮来展开它,按钮显示"展开".它是有用的,除了我需要按钮在单击时更改为"折叠",然后当再次单击时更改为"展开".按钮上的书写是背景图像.

所以我基本上只需要在点击时更改div的背景图像,除了类似切换之外.

1> Nick..：

$('#divID').css("background-image", "url(/myimage.jpg)");

应该做的伎俩,只需在元素上的单击事件中将其挂钩

$('#divID').click(function()
{
  // do my image switching logic here.
});

2> 小智..：

我个人只会使用JavaScript代码在两个类之间切换.

让CSS概述你在div上需要的一切MINUS背景规则,然后添加两个类(例如:展开和折叠)作为规则,每个类具有正确的背景图像(或者如果使用精灵,则为背景位置).

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更改更舒服.

3> Ecropolis..：

使用jQuery更改背景图像CSS有两种不同的方法.

$('selector').css('backgroundImage','url(images/example.jpg)');

$('selector').css({'background-image':'url(images/example.jpg)'});

仔细看看差异.在第二种情况下,您可以将常规CSS和多个CSS属性串联起来.

2.不正确无效.将多个属性串在一起就像这样:$('selector').css({'background-color':'yellow','background-image':'url()'})

4> Dave Ward..：

如果对背景图像使用CSS精灵,则可以根据您是在展开还是折叠来碰撞背景偏移+/- n像素.不是切换,而是比切换背景图像URL更接近它.

奖励:如果您只使用单独的图像,则实际加载了加载时显示的图像.在加载第二个状态之前切换图像时会有一个小的延迟.使用精灵,你只有一个图像,它已经存在.

5> Loupax..：

我是这样做的:

CSS

#button{
   background-image: url("initial_image.png");
}

#button.toggled{
  background-image:url("toggled_image.png");
}

$('#button').click(function(){
  $('#my_content').toggle();
  $(this).toggleClass('toggled');
});

6> alexp206..：

一种方法是将两个图像放在HTML中,在SPAN或DIV中,您可以使用CSS或在页面加载时使用JS隐藏默认值.然后你可以切换点击.这是我用来在列表中放置左/下图标的类似示例:

$(document).ready(function(){
    $(".button").click(function () {
        $(this).children(".arrow").toggle();
            return false;
    });
});

7> enobrev..：

这适用于WinXP上的所有当前浏览器.基本上只是检查当前的背景图像是什么.如果是image1,则显示image2,否则显示image1.

jsapi的东西只是从谷歌CDN加载jQuery(更容易测试桌面上的misc文件).

替换是针对跨浏览器兼容性(opera和ie添加引号到url和firefox,chrome和safari删除引号).


    
        




















    

    
        
            
            
                
                    
                
            

            
                mobiledu2402852357            

            
                这个屌丝很懒，什么也没留下！            
            
            

                                
                    
                    关注作者
                            

        
    


    
        Tags | 热门标签
        
            
                                
                    actionscrip
                
                                
                    bash
                
                                
                    c#
                
                                
                    c++
                
                                
                    c语言
                
                                
                    erlang
                
                                
                    flutter
                
                                
                    go
                
                                
                    golang
                
                                
                    java
                
                                
                    javascript
                
                                
                    lua
                
                                
                    node.js
                
                                
                    perl
                
                                
                    php
                
                                
                    python
                
                                
                    scala
                
                                
                    typescript
                
                                
            
        
    


    
        RankList | 热门文章
        
            
                                
                    1在什么情况下你会使用一个返回另一个函数(Javascript)的函数？
                
                                
                    2带有CORS转储数据的Django 1.9:"corsheaders_corsmodel"不存在
                
                                
                    3如何设计一些常量是否由多个类使用
                
                                
                    4访问for-of循环内的ES6数组元素索引
                
                                
                    5MYSQL基于提供的月份排序
                
                                
                    6javax.servlet-api.jar与servlet-api.jar之间的区别
                
                                
                    7适用于Android和IOS的HighChart库
                
                                
                    8在Haskell中导入数据类型
                
                                
                    9Array.apply(null,Array(9))vs new Array(9)
                
                                
                    10如何在DynamoDB中查询不存在的(null)属性
                
                                
                    11React  - 如何仅捕获父级的onClick事件而不是子级
                
                                
                    12子类的对象创建是否创建了超类的对象,如果是,是否可以在子类中访问它？
                
                                
                    13Node.js sqlite3 IN运算符
                
                                
                    14在Magento2中获取当前货币符号
                
                                
                    15使用Ramda/LoDash/Underscore在嵌套属性上进行独特分组和计数
                
                                
                    16Java流.orElseThrow
                
                                
                    17Tensorflow中的同步与异步计算
                
                                
                    18Jenkins powershell插件总是成功构建
                
                                
                    19RxJava和Retrofit2:NetworkOnMainThreadException
                
                                
                    20如何使用php从mysql数据库访问特定值？

DevBox开发工具箱 | 专业的在线开发工具网站