Question

我有四个圆圈，每个圆圈都有一个独特的背景颜色，其中一个是白色的跨度。当用户点击每个圆圈时，我希望该圆圈切换背景和跨度颜色，换句话说，我希望为span设置背景颜色，并将背景设置为白色。

我的代码正确执行此操作，但当我点击任何其他圆圈时，我希望该圆圈具有白色背景和彩色跨度，而前一个圆圈恢复为默认值（白色跨度，彩色背景）。

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>

Answer 1

对它进行了一次破解，希望它会有所帮助：

http://jsfiddle.net/jnLMy/

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>

CSS：

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; }

JS：

$("#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('');
}

Answer 2

试试这个脚本：http://jsfiddle.net/YAJma/

$("#fifthcircleholder li").click(function() {
    $('span').css({"color":"black", "background":"white"});
    $('span',this).css({"color":"red", "background":"yellow"});
});

Answer 3

$("#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');
});

单击切换文本和背景颜色

3 个答案: