javascript - jquery写的背景色怎么切换？

Question

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

    //支付选择方式
    $(".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");
        });
    })

Answer 1

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

https://jsfiddle.net/px7hbj8L/

Answer 2

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

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

Answer 3

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

我不知道你这是什么用法

Answer 4

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

<style>
//橙色
.orange{
    background:#ff7e00;
}
//蓝色
.blue{
    background:#ff7e00;
}
//默认灰色
.default{
    background:#9E9E9E;
}
</style>
//支付选择方式
// 金额支付
$(".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");//这是兑换云卷行
})

Answer 5

大兄弟，你怎么知道你就一定是点的现金支付按钮？就一句$(".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/

Answer 6

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