javascript - 怎么针对这个黎类的 sibling ？

Question

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

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

我能够获取被单击的导航按钮的 ID 并切换它的 img src。但是我无法定位它的 sibling ，另一个李的 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);
    // ...
};