javascript - 单选按钮显示和隐藏 div 的下一个/上一个按钮

Question

我的 javascript 代码有问题，我正在尝试使用下一个和上一个按钮来检查下一个和上一个单选按钮。

但是当我尝试将它们组合起来时，它不起作用!请帮忙:(

这是我的代码

javascript

               <script>
                //this is show and hide//
                    $(document).ready(function() {
                        $("input[name$='next[]']").click(function() {
                            var test = $(this).val();

                            $("div.desc").hide();
                            $("#next" + test).show();
                        });
                    });

        //this is in the bla bla next and previous -->
                    var index = 0;
                    dayNavigation = function (direction) {
                        var curr = $('.slider input[name="next[]"]:checked');
                        console.log(curr);
                        if(direction == 'next'){
                                if(index > 0){
                                    $('input[name="next[]"]').eq(index-1).prop("checked", true);
                                curr.prop("checked", false);
                                index--;
                            }
                        }
                        else{
                                if(index < $('input[name="next[]"]').length - 1){
                                    $('input[name="next[]"]').eq(index+1).prop("checked", true);
                                curr.prop("checked", false);
                                index++;
                            }
                        }



                    };
                </script>

HTML

         <input type="radio" name="next[]" value="1" checked="checked">
        <input type="radio" name="next[]" value="2" />
        <input type="radio" name="next[]" value="3" />
        <input type="radio" name="next[]" value="4" />
        <input type="radio" name="next[]" value="5" />

        <div id="next2" class="desc" style="display: none;">
                    <p> inside of next 2 </p>   
                    <button type="button" onclick="dayNavigation('next');" data-role="none" class="slick-prev" aria-label="Previous" tabindex="0" role="button">Previous</button>
                    <button type="button" onclick="dayNavigation('prev');" data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button">Next</button>

                    </div>

                    <div id="next3" class="desc" style="display: none;">
                    <p> inside of next 3 </p>
                    <button type="button" onclick="dayNavigation('next');" data-role="none" class="slick-prev" aria-label="Previous" tabindex="0" role="button">Previous</button>               
                    <button type="button" onclick="dayNavigation('prev');" data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button">Next</button>
                    </div>

                    <div id="next4" class="desc" style="display: none;">
                    <p> inside of next 4 </p>
                    <button type="button" onclick="dayNavigation('next');" data-role="none" class="slick-prev" aria-label="Previous" tabindex="0" role="button">Previous</button>               
                    <button type="button" onclick="dayNavigation('prev');" data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button">Next</button>
                    </div>

                    <div id="next5" class="desc" style="display: none;">
                    <p> inside of next 5 </p>
                    <button type="button" onclick="dayNavigation('next');" data-role="none" class="slick-prev" aria-label="Previous" tabindex="0" role="button">Previous</button>           
                    <button type="button" onclick="dayNavigation('prev');" data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button">Next</button>
                    </div>

Answer 1

试试这个 https://jsfiddle.net/ucostea/4ckqqfd7/2/

$(document).ready(function() {
    $("input[name$='next[]']").click(function() {
      var test = $(this).val();

      $("div.desc").hide();
      $("#next" + test).show();
    });
  });

  //this is in the bla bla next and previous -->
  var index = 0;
  dayNavigation = function(direction) {
    var curr = $('input[name="next[]"]:checked');

    if (direction == 'next') {

      curr.next().attr("checked", "checked");
      curr.next().click();

    } else {
      curr.prev().attr("checked", "checked");
      curr.prev().click();
    }

  };