javascript - jquery写的背景色怎么切换?
阿神
阿神 2017-04-11 11:01:07
0
6
703


这个问题是,点击『现金支付』按钮,没办法让现金支付的背景色变成橙色的,或者没办法切换背景色。请求帮忙解决

//支付选择方式 $(".pay-tabs li").click(function(){ $(this).addClass(function () { //点击按钮则添加"sel" $(this).addClass('sel'); //点击之后,现金支付的框背景色变成橙色 $("p[data-bg1]").css("background","#ff7e00"); //点击之后,兑换云券的框背景色变成灰色 $("p[data-bg2]").css("background","#9E9E9E"); }).siblings('li').removeClass(function () { //点击下一个按钮则删除之前"sel" $(this).removeClass('sel'); 点击下一个按钮,现金支付的框背景色变成灰色 $("p[data-bg1]").css("background","#9E9E9E"); 点击下一个按钮,兑换云券的框背景色变成蓝色 $("p[data-bg2]").css("background","#1863af"); }); })
阿神
阿神

闭关修行中......

Antworte allen (6)
大家讲道理

写了个demo,你可以参考一下:

https://jsfiddle.net/px7hbj8L/

    PHPzhong

    试试 background-color .css("background-color","#9E9E9E");

    再不然就是选择器有问题,确定 $("p[data-bg1]")这样能获得对应的对象,可以写 $("p[data-bg1]").hide()试试看是否会隐藏。

      刘奇

      addClass方法中如果传入函数是需要这个函数返回字符串以代表类名的,removeClass同理

      我不知道你这是什么用法

        PHPzhong

        我建议,你定义一个颜色 比如

         //支付选择方式 // 金额支付 $(".amount-payment").click(function(){//点击金额按钮 $("p").removeClass("orange blue");//假设这是以上两条数据p $("p[data-bg1]").addClass("orange");//这是现金支付行 }) //积分支付 $(".exchange").click(function(){//点击积分按钮 $("p").removeClass("orange blue"); $("p[data-bg2]").addClass("blue");//这是兑换云卷行 })
          洪涛

          大兄弟,你怎么知道你就一定是点的现金支付按钮?就一句$(".pay-tabs li").click(function(){

          $(this).addClass(function () {...}); })就能绑定到目标元素了? 你知不知道$(".pay-tabs li")返回的是一个什么?数组!这意味着什么?要循环!怎么循环,jq的each函数自己去看看。就算你不循环,你也得$(".pay-tabs li").eq(0/1)吧? 你知道你为什么没有效果?你点击一次它每次都执行removeClass(function () { //点击下一个按钮则删除之前"sel" $(this).removeClass('sel'); 点击下一个按钮,现金支付的框背景色变成灰色 $("p[data-bg1]").css("background","#9E9E9E"); 点击下一个按钮,兑换云券的框背景色变成蓝色 $("p[data-bg2]").css("background","#1863af"); });,所以没有变化的。 给你看下我的一个小例子(不过是用元生js写的,你自己换一下就Ok ,还比我的简单一些)https://jsfiddle.net/Jason_Ght92/63px88vt/1/
            刘奇

            你这样切换不麻烦嘛?
            直接更改class
            点击谁就给谁加class 另外一个移除就可以了。

              Neueste Downloads
              Mehr>
              Web-Effekte
              Quellcode der Website
              Website-Materialien
              Frontend-Vorlage
              Über uns Haftungsausschluss Sitemap
              Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!