接通点击

Question

文字和背景颜色我每四个圆了一个独特的背景颜色和跨度里面是白色的。 当用户点击在每个圆我想要那个圆切换背景和跨度颜色，或者换句话说，我想要的背景色为跨度来设定，和背景成为白。

我的代码做这个正确的，但是当我点击其他任何圈子我想这个圈子有白色背景和彩色跨度而此前圆回默认（白色跨度，彩色背景）。

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