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

Question

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

I have a basic nav, the li's default image is a white ball, the selected nav button has a blue ball.

I'm able to get the id of the nav button that is clicked and switch it's img src. However I have not been able to target it's siblings, the other li's img src :(

So currently when you click other buttons, the pervious blue buttons stay blue.

How would you approach this?

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 already seems to be a li element, so it doesn't have any li parents. And since it doesn't have img siblings, li img never matches.

And FYI, instead of passing the ID to the function, you just pass the element itself. You don't have to search for the element again if you already have a reference to it.

buttonStates(this);

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