javascript - 为什么我的 next() 和 prev() 切换的文本输出不正确？

Question

单击箭头更改显示的选项时，会显示不正确的选项。

用户应该能够点击选项菜单来打开/关闭它，并且能够点击一个选项来选择它。或者，可以使用箭头来切换选项。

这是有问题的代码:

    <script>
    $("#arrow_left_physics").click(function() {
      var $selected = $(".left_menu_option_selected").removeClass("left_menu_option_selected");
      var divs = $("#left_menu__variant_physics").children();
        divs.eq((divs.index($selected) - 1) % divs.length).addClass("left_menu_option_selected");
        $("#left_menu_open .button-text").text($($selected).text());
        });
    $("#arrow_right_physics").click(function() {
        var $selected = $(".left_menu_option_selected").removeClass("left_menu_option_selected");
        var divs = $selected.parent().children();
        divs.eq((divs.index($selected) + 1) % divs.length).addClass("left_menu_option_selected");
        $("#left_menu_open .button-text").text($($selected).text());
    });
    </script>

$("#menu_open").click(function() {
  $("#menu").toggle();
});



$(".menu_option").click(function() {
  if ($(this).hasClass(".menu_option_selected")) {} else {
    $(".menu_option").removeClass("menu_option_selected");
    $(this).addClass("menu_option_selected");
    $("#menu_open .button_text").text($(this).text());
  }
});



$("#arrow_left").click(function() {
  var $selected = $(".menu_option_selected").removeClass("menu_option_selected");
  var options = $("#menu").children();
  options.eq((options.index($selected) - 1) % options.length).addClass("menu_option_selected");
  $("#menu_open .button_text").text($($selected).text());
});
$("#arrow_right").click(function() {
  var $selected = $(".menu_option_selected").removeClass("menu_option_selected");
  var options = $("#menu").children();
  options.eq((options.index($selected) + 1) % options.length).addClass("menu_option_selected");
  $("#menu_open .button_text").text($($selected).text());
});

.menu_open {
  Cursor: pointer;
}

.menu {
  display: none;
  position: absolute;
  border: 1px solid;
}

.menu_option {
  Cursor: pointer;
  Padding: 5px;
}

.menu_option:hover {
  Background-Color: black;
  Color: white;
}

.menu_option_selected {
  color: green;
  Background-color: #00ff0a4d;
}

.menu_option_selected:hover {
  color: green;
}

.arrow {
  Cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <input class="arrow" type="button" id="arrow_left" value="❮" />
  <input class="arrow" type="button" id="arrow_right" value="❯" />
</div>

<div>
  <button class="menu_open" id="menu_open">
    <span class="button_text">option1</span>
  </button>
</div>

<div class="menu" id=menu>
  <div class="menu_option menu_option_selected">option1</div>
  <div class="menu_option">option2</div>
  <div class="menu_option">option3</div>
  <div class="menu_option">option4</div>
  <div class="menu_option">option5</div>
  <div class="menu_option">option6</div>
</div>

-似乎第一次点击箭头没有用，索引函数在某处不正确。

Answer 1

问题是这一行:

$("#menu_open .button_text").text($($selected).text());

$($selected) 是之前选择的选项，因此您显示的是之前选项的文本，而不是当前选项。 (顺便说一句，不需要将 $selected 包装在 $() 中，因为它已经是一个 jQuery 对象。)

您应该使用 $(".menu_option_selected").text() 而不是 $($selected).text() 来获取当前选项。

您还应该使按钮的初始文本为 option1，以便它与所选选项匹配。

$("#menu_open").click(function() {
  $("#menu").toggle();
});

$(".menu_option").click(function() {
  if ($(this).hasClass(".menu_option_selected")) {} else {
    $(".menu_option").removeClass("menu_option_selected");
    $(this).addClass("menu_option_selected");
    $("#menu_open .button_text").text($(this).text());
  }
});

$("#arrow_left").click(function() {
  var $selected = $(".menu_option_selected").removeClass("menu_option_selected");
  var options = $("#menu").children();
  options.eq((options.index($selected) - 1) % options.length).addClass("menu_option_selected");
  $("#menu_open .button_text").text($(".menu_option_selected").text());
});
$("#arrow_right").click(function() {
  var $selected = $(".menu_option_selected").removeClass("menu_option_selected");
  var options = $("#menu").children();
  options.eq((options.index($selected) + 1) % options.length).addClass("menu_option_selected");
  $("#menu_open .button_text").text($(".menu_option_selected").text());
});

.menu_open {
  Cursor: pointer;
}

.menu {
  display: none;
  position: absolute;
  border: 1px solid;
}

.menu_option {
  Cursor: pointer;
  Padding: 5px;
}

.menu_option:hover {
  Background-Color: black;
  Color: white;
}

.menu_option_selected {
  color: green;
  Background-color: #00ff0a4d;
}

.menu_option_selected:hover {
  color: green;
}

.arrow {
  Cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <input class="arrow" type="button" id="arrow_left" value="❮" />
  <input class="arrow" type="button" id="arrow_right" value="❯" />
</div>

<div>
  <button class="menu_open" id="menu_open">
    <span class="button_text">option1</span>
  </button>
</div>

<div class="menu" id=menu>
  <div class="menu_option menu_option_selected">option1</div>
  <div class="menu_option">option2</div>
  <div class="menu_option">option3</div>
  <div class="menu_option">option4</div>
  <div class="menu_option">option5</div>
  <div class="menu_option">option6</div>
</div>