为什么我从 next() 和 prev() 切换的文本输出不正确?

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


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


这是有问题的代码:


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

}


aluckdog
浏览 164回答 2
2回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript