Jquery 单击可切换文本和背景色

我有四个圆圈，每个圆圈都有一个独特的背景色和一个白色的跨度。 当用户单击每个圆圈时，我希望该圆圈切换背景和跨度颜色，或者换句话说，我希望背景颜色设置为跨度，背景变为白色

我的代码正确地做到了这一点，但当我单击任何其他圆时，我希望该圆具有白色背景和彩色跨度，而上一个圆返回默认值（白色跨度，彩色背景）

jQuery：

$("#fifthcircleholder li").click(function () {
    var currentspan = $(this).find("span");
    var allspans = $("#fifthcircleholder li").find("span");

    $(this).find("span").css({
        color: $(this).css("background-color")
    });
    $(allspans).not(currentspan).css({
        "color": "#fff"
    });
    $(this).css({
        "background-color": "#ffffff"
    })

    var found = $("#fifthcircleholder li");
    if (found.css("background-color") == "#fff") {
        $(this).find("span").css({
            "background-color": $(this).css("color")
        });
    }


});

HTML：

<ul id="fifthcircleholder">
    <li id="fifthc1"><span>blah blah</span></li>
    <li id="fifthc2"><span>blah</span></li>
    <li id="fifthc3"><span>blah</span></li>
    <li id="fifthc4"><span>blah</span></li>
</ul>

诸如此类
诸如此类
诸如此类
诸如此类

试试这个脚本：

---

尝试一下，希望能有所帮助：

HTML:

JS:

$（“#第五圈持有人li”）。单击（函数（）{
$（'fifthcircleholder li'）。每个（函数（）{
if（hexc（$（this）.css（'background-color'））=='#ffffff'）{
$（this.css（'background-color'，$（this.find（'span'）.css（'background-color'））；
$（this.find（'span'）.css（'background-color'，'#ffffffff'）；
}        
});    
$（this.find（'span'）.css（'background-color'，$（this.css（'background-color'））；
$（this.css（'background-color'，'#ffffff'）；
});
函数hexc（colorval）{
var parts=colorval.match（/^rgb\（\d+）\s*（\d+）\s*（\d+）$/）；
删除（第[0]部分）；
对于（var i=1；我能不能把所有这些都简化为只给“活动”圆圈一个“活动”类，并创建CSS规则来影响它？@ChristianWattengård嗯，不是真的，项目的数量和它们的颜色将是动态的，这不重要。你可以给你所有的圈持有者一个类，比如说“圈持有者”。然后执行$（“.circleholder”）.removeClass（“活动”）；$（“#fifthcircleholder”）.addClass（“活动”）；那么不管你有多少个圆圈持有人……谢谢，我正在寻找一种使用变量切换颜色的方法，请注意，每个圆圈都有不同的颜色，当它处于活动状态时，相同的颜色会延伸到span。@Sonyflat最初在哪里以及如何设置圆圈的颜色？@wirey当前颜色来自外部css file，但稍后它们将从cms中检索。这就是为什么我正在寻找一种使用变量切换颜色的方法，因此它适用于动态内容。谢谢，我相信它的方向是正确的，但当你点击一个圆圈时，所有背景都消失了。这是小提琴：你摇滚！这是你所谓的完美答案。非常感谢。
$("#fifthcircleholder li").click(function() {
    $('span').css({"color":"black", "background":"white"});
    $('span',this).css({"color":"red", "background":"yellow"});
});​

$("#fifthcircleholder li").click(function() {
        //reset potentially previously set colors:
        $('#fifthcircleholder li').each(function(){
            //child span's color
            var spanColor=$('span',this).css('background-color');
            if(spanColor!='white'){
                $(this).css('background-color',spanColor);
                $('span',this).css('background-color','white');
            }
        });
        //now for the colors of the currently clicked li
        var liColor=$(this).css('background-color');
        $('span').css('background-color',liColor);
        $(this).css('background-color','white');
});

<ul id="fifthcircleholder">
<li id="fifthc1"><span>blah blah</span></li>
<li id="fifthc2"><span>blah</span></li>
<li id="fifthc3"><span>blah</span></li>
<li id="fifthc4"><span>blah</span></li>
</ul>​

li { width:100px; padding:20px; cursor:pointer; text-align:center; }
li span { background:#fff; }

#fifthc1 { background:lime; }
#fifthc2 { background:yellow; }
#fifthc3 { background:orange; }
#fifthc4 { background:blue; }

$("#fifthcircleholder li").click(function() {

    $('#fifthcircleholder li').each(function() {
        if( hexc( $(this).css('background-color') ) === '#ffffff' ){
            $(this).css('background-color', $(this).find('span').css('background-color') );
            $(this).find('span').css('background-color', '#ffffff' );
        }        
    });    

    $(this).find('span').css('background-color', $(this).css('background-color') );
    $(this).css('background-color', '#ffffff');
});

function hexc(colorval) {
    var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    delete(parts[0]);
    for (var i = 1; i <= 3; ++i) {
        parts[i] = parseInt(parts[i]).toString(16);
        if (parts[i].length == 1) parts[i] = '0' + parts[i];
    }
   return '#' + parts.join('');
}