接通點擊

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