Question

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

＆＃13;

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);
  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

我无法查看您的所有代码，但我非常确定

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

没有做你想要的。特别是因为它总是返回按下下一个按钮的错误。

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

您要搜索的内容可能是$.siblings()。但我个人会使用限定符#characterScreen_characterDisplay ul而不是相对搜索它。

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

1 个答案: