单选按钮的下一个/上一个按钮显示并隐藏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();
    }

  };