4赞

使用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启动ASP.NET 5 RC1应用程序时,IIS Express + HttpPlatformHandler崩溃
                
                                
                    2Tensorflow(python):train_step.run中的"ValueError:设置带序列的数组元素"(...)
                
                                
                    3Postgres创建一个带有外键数组的表
                
                                
                    4多个字符串替换,在R中使用gsubfn()
                
                                
                    5为什么新的哈希有七个对象比六个长度哈希慢得多？
                
                                
                    6如何在v0.8中的Influxdb获取数据库列表
                
                                
                    7获取当前方法名称
                
                                
                    8如果1 =='1'// true且1 == true // true则为什么1 =='true'// false
                
                                
                    9Xcode 7.2无法通过iOS 9.2连接到iPhone
                
                                
                    10在PKCS12导出过程中,OpenSSL挂起,"加载'屏幕'进入随机状态"
                
                                
                    11什么是-anydpi和-nodpi之间的区别？
                
                                
                    12您尝试访问的存储区必须使用指定的端点进行寻址,同时从jenkins上传到s3
                
                                
                    13Android中的Firebase数据描述排序
                
                                
                    14如何在ASP.NET MVC视图中使用@page CSS
                
                                
                    15为什么在开始和结束字符串之间删除在java中无法正常工作？
                
                                
                    16如何找到Azure PowerShell版本？
                
                                
                    17Perl  -  Regex,条件和匹配不一致字符串的多个对象
                
                                
                    18AccountManager返回空帐户
                
                                
                    19使用Async/Await和EntityFramework调用多个存储过程
                
                                
                    20如何在python中显示&符号(&)？

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