Question

我正在寻找其他问题，但我找不到答案。

我有这样的代码：

<div class="chacter_form">
    <form id="new_character" class="new_character" method="post" accept-charset="UTF-8" action="/users/1/characters">   
        <ul class="no_dot form_partial active_partial"></ul>
        <ul class="no_dot hide form_partial test"></ul>
        <ul class="no_dot hide form_partial"></ul>
    </form>
    <button id="prev_form_button"></button>
    <button id="next_form_button"></button>
</div>

当然，每个ul都有一些li。我想编写一个jQuery函数，当单击#next_form_button时，它将隐藏第一个ul并显示第二个hide。 $(document).on('click', '#next_form_button', function(){ $active_partial = $('ul.active_partial') $next_partial = $('ul.active_partial').next('ul') $active_partial.removeClass('active_partial').fadeToggle() $next_partial.addClass('active_partial').fadeToggle() });类将display设置为none。

这是我的尝试，但它不起作用：

document.getElementById("plus").addEventListener("click",
    function() { assignVarCalc('plus'); }
);

document.getElementById("minus").addEventListener("click",
     function() { assignVarCalc('minus');}
);

function assignVarCalc(operation) {
  var firstNumb = +document.getElementById("Numb1").value;
  var secondNumb = +document.getElementById("Numb2").value; 
  if(operation === 'plus') {
   return alert(firstNumb+secondNumb);
  }
  if(operation === 'minus') {
   return alert(firstNumb-secondNumb);
  }
}

任何帮助将不胜感激

Answer 1

以下是完整的snippet，您会发现它非常方便：）

<强>感谢

$(function(){
  var allUL = $("form ul").length;
  $("#next_form_button").click(function(){
   allUL--;
   var currentUL = $(".active_partial");
     if(allUL == 0){        $(currentUL).removeClass("active_partial").addClass("hide");
     $("form ul:eq(0)").addClass("active_partial").removeClass("hide");
allUL = $("form ul").length;
    } else {    $(currentUL).next("ul").addClass("active_partial").removeClass("hide");
     $(currentUL).removeClass("active_partial").addClass("hide");
        }
});
  
  $("#prev_form_button").click(function(){
    allUL++;
    var currentUL = $(".active_partial");
    if(allUL > 3){ $(currentUL).removeClass("active_partial").addClass("hide");
    $("form ul:eq(2)").addClass("active_partial").removeClass("hide");
allUL = $("form ul").length - 2;
    } else { $(currentUL).prev("ul").addClass("active_partial").removeClass("hide");
   $(currentUL).removeClass("active_partial").addClass("hide");
        }
});
  
});

.hide{
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="chacter_form">

    <form id="new_character" class="new_character" method="post" accept-charset="UTF-8" action="/users/1/characters">

    <ul class="no_dot form_partial active_partial">
      <li>ul li 1</li>
      <li>ul li 1</li>
      <li>ul li 1</li>
      <li>ul li 1</li>
      </ul>
    <ul class="no_dot hide form_partial test">
      <li>ul li 2</li>
      <li>ul li 2</li>
      <li>ul li 2</li>
      <li>ul li 2</li>
      </ul>
    <ul class="no_dot hide form_partial">
      <li>ul li 3</li>
      <li>ul li 3</li>
      <li>ul li 3</li>
      <li>ul li 3</li>
      </ul>

</form>
<button id="prev_form_button">Prev</button>

<button id="next_form_button">Next</button>

</div>

Answer 2

您可以使用.toogleClass();

＆＃13;

$('#next_form_button').click(function(){
  $active_partial = $('ul.active_partial');
  $next_partial = $('ul.active_partial').next('ul');
  $active_partial.removeClass('active_partial').toggleClass('hide');
  $next_partial.addClass('active_partial').toggleClass('hide');
 });

＆＃13;

.hide{
 display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="chacter_form">

    <form id="new_character" class="new_character" method="post" accept-charset="UTF-8" action="/users/1/characters">
    <ul class="no_dot form_partial active_partial" >first</ul>
    <ul class="no_dot hide form_partial test">second</ul>
    <ul class="no_dot hide form_partial">Third</ul>
</form>
<button id="prev_form_button"></button>

<button id="next_form_button">toggle</button>

</div>

＆＃13;

Answer 3

使用可以使用:visible选择器查找可见DERELICT_SHIP_PROJECT: "Derelict Ship"并使用next()查找下一个ul。

ul

$("#next").click(function(){
    if ($("ul:visible").index() < 2)
        $("ul:visible").hide().next().show();
});

$("#prev").click(function(){
    if ($("ul:visible").index() > 0)
        $("ul:visible").hide().prev().show();
});

ul:nth-child(2),
ul:nth-child(3) {
    display: none;
}

Answer 4

通过略微修改

查看您的代码本身是否正常工作

$(document).on('click', '#next_form_button', function(){
    $active_partial = $('ul.active_partial')
    $next_partial = $('ul.active_partial').next('ul')
    $active_partial.removeClass('active_partial').fadeToggle()
    $next_partial.addClass('active_partial').show()
});

如何使用jQuery在click事件上选择下一个ul

4 个答案: