0

それぞれ独自の背景色と白のスパンを持つ 4 つの円があります。ユーザーが各円をクリックすると、その円の背景とスパンの色が切り替わります。つまり、背景色がスパンに設定され、背景が白になります。

私のコードはこれを正しく行いますが、他の円をクリックすると、前の円がデフォルト (白いスパン、色付きの背景) に戻っている間、その円に白い背景と色付きのスパンが必要です。

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>
4

3 に答える 3

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('');
}
于 2013-01-03T18:41:11.160 に答える
0

このスクリプトを試してください: http://jsfiddle.net/YAJma/

$("#fifthcircleholder li").click(function() {
    $('span').css({"color":"black", "background":"white"});
    $('span',this).css({"color":"red", "background":"yellow"});
});​
于 2013-01-03T18:21:00.983 に答える
0 
$("#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');
});
于 2013-01-03T18:33:03.803 に答える