使用下一个和上一个按钮更改图像背景

Question

我目前正在尝试为 Airconsole 创建角色选择。 我想我可以使用像画廊这样的 Jquery 方法来创建它。 所以我需要一个上一个按钮，一个下一个按钮和字符显示。 似乎我犯了一个我无法弄清楚的错误，因为我不习惯使用 Javascript。

 var speed = 100; $(".prev").click(function() { var now = $(this).parent().next("ul.char_display").children(":visible"), last = $(this).parent().next("ul.char_display").children(":last"), prev = now.prev(); prev = prev.index() == -1 ? last : prev; now.fadeOut(speed, function() { prev.fadeIn(speed); }); }); $(".next").click(function() { var now = $(this).parent().next("ul.char_display").children(':visible'), first = $(this).parent().next("ul.char_display").children(':first'), next = now.next(); next = next.index() == -1 ? first : next; now.fadeOut(speed, function() { next.fadeIn(speed); }); }); $(".char_display li").click(function() { var first = $(this).parent().children(':first'), next = $(this).next(); next = next.index() == -1 ? first : next; $(this).fadeOut(speed, function() { next.fadeIn(speed); }); });

 .prev { width: 100%; height: 100%; margin: 0; padding: 0; } .next { width: 100%; height: 100%; margin: 0; padding: 0; } .char_display li { display: none; list-style: none; height: 100%; width: 100%; margin: 0; padding: 0; } .char_display li:first-child { display: block; height: 100%; width: 100%; margin: 0; padding: 0; } .char_display { height: 100%; width: 100%; margin: 0; padding: 0; } .char { height: 100%; width: 100%; margin: 0; padding: 0; } #char1 { background: blue; height: 100%; width: 100%; margin: 0; padding: 0; } #char2 { background: red; height: 100%; width: 100%; margin: 0; padding: 0; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="characterScreen_characterBlock"> <div id="characterScreen_leftArrow" class="characterScreen_left" ontouchend="otherChar(true);" ontouchend="otherChar(true);"> <div class="prev"></div> </div> <div id="characterScreen_characterDisplay" class="characterScreen_center"> <ul class="char_display"> <li> <div class="char" id="char1"></div> </li> <li> <div class="char" id="char2"></div> </li> </ul> </div> <div id="characterScreen_rightArrow" class="characterScreen_right" ontouchend="otherChar(false);" ontouchend="otherChar(false);"> <div class="next"></div> </div> </div>

Answer 1

我没有浏览过你所有的代码，但我很确定

$(this).parent().next("ul.char_display").children("...")

不做你想要的。 特别是因为它总是在按下下一步按钮时返回错误。

$.next()返回下一个 DOM 元素。 但是characterScreen_rightArrow没有下一个元素（在此代码段中）

您正在寻找的可能是$.siblings() 。 然而，我个人会使用限定符#characterScreen_characterDisplay ul而不是相对地搜索它。