如何针对这个李班的兄弟姐妹？

Question

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

我有一个基本的导航，li的默认图像是一个白色的球，所选的导航按钮有一个蓝色的球。

我可以获取点击的导航按钮的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永远不会匹配。

和FYI，您只需传递元素本身，而不是将ID传递给函数。如果您已经有对该元素的引用，则不必再次搜索该元素。

buttonStates(this);

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