如何瞄準這個李族的兄弟姐妹？

Question

http://codepen.io/leongaban/pen/dCHwI

我有一個基本的導航，李的默認圖像是一個白球，所選擇的導航按鈕有一個藍色的球。

我能夠得到被點擊的導航按鈕的id並將其切換到img src。不過，我一直無法瞄準它的兄弟姐妹，其他李時珍img src :(

所以目前當您單擊其他按鈕，透水藍色按鈕留藍色。

你會如何處理這？

HTML

<footer id="tour_footer"> 
    <nav> 
     <ul> 
      <li id="tour_prev">< prev</li> 

      <li id="tour_btn_1" class="tour_nav_circle"> 
       <img src="http://leongaban.com/_codepen/tour_nav_blue.gif" alt="tour 1" /> 
      </li> 
      <li id="tour_btn_2" class="tour_nav_circle"> 
       <img src="http://leongaban.com/_codepen/tour_nav_white.gif" alt="tour 2" /> 
      </li> 
      <li id="tour_btn_3" class="tour_nav_circle"> 
       <img src="http://leongaban.com/_codepen/tour_nav_white.gif" alt="tour 3" /> 
      </li> 
      <li id="tour_btn_4" class="tour_nav_circle"> 
       <img src="http://leongaban.com/_codepen/tour_nav_white.gif" alt="tour 4" /> 
      </li> 

      <li id="tour_next">next ></li> 
     </ul> 
    </nav> 
</footer> 

jQuery的

var buttonStates = function(id) { 
    console.log('inside buttonStates function: '+id); 
    var $navBtn = $(id); 
    $navBtn.children().attr("src","http://leongaban.com/_codepen/tour_nav_blue.gif"); 
    $navBtn.parents('li').siblings('li img').attr("src","http://leongaban.com/_codepen/tour_nav_white.gif"); 

    console.log($(id)); 
} 

// Button to switch Frames 
$('.tour_nav_circle').unbind('click').bind('click', function (event) { 
    var id = this.id; 
    console.log(id); 
    buttonStates('#'+id); 
}); 

Answer 1

$navBtn.siblings('li').children('img') 

$navBtn似乎已經是一個li元素，因此它不具有任何li父母。而且由於它沒有img兄弟姐妹，所以li img永遠不會匹配。

而僅供參考，不是將ID傳遞給函數，而是傳遞元素本身。如果您已經有了對它的引用，則不必再次搜索該元素。

buttonStates(this); 

// ... 
var buttonStates = function(el) { 
    var $navBtn = $(el); 
    // ... 
};