如何定位这个 li 类的兄弟姐妹？

Question

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

我有一个基本的nav，li的默认图片是一个白球，选中的nav按钮有一个蓝球。

我能够获取被点击的导航按钮的 id 并将其切换为 img src。但是我无法定位它的兄弟姐妹，另一个 li 的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);
    // ...
};