Question

我有以下jQuery代码：

<script> function hideMenteeQuestions() {
    $("#menteeapp").hide();
    $("textarea[name='short_term_goals']").rules("remove", "required");
    $("textarea[name='long_term_goals']").rules("remove", "required");
}

function showMenteeQuestions() {
    $("#menteeapp").show();
    $("textarea[name='short_term_goals']").rules("add", {
        required: true
    });
    $("textarea[name='long_term_goals']").rules("add", {
        required: true
    });
}

function hideMentorQuestions() {
    $("#mentorapp").hide();
    $("input[name='mentees']").rules("remove", "required");
}

function showMentorQuestions() {
    $("#mentorapp").show();
    $("input[name='mentees']").rules("add", {
        required: true
    });
}

</script>

<script>
    $(document).ready(function(){

    $("#mentee").change(function(){
      if($(this).is(':checked')){
        showMenteeQuestions();
      }else{
        hideMenteeQuestions();
      }
    });
    $("#mentor").change(function(){
      if($(this).is(':checked')){
        showMentorQuestions();
      }else{
        hideMentorQuestions();
      }
    });

    $('#mentee').change();
    $('#mentor').change();

    });
    </script >

此外，这是我的复选框的HTML：

<input type="checkbox" name="type[]" id="mentor" value="mentor"><span class="checkbox">Mentor</span>
<input type="checkbox" name="type[]" id="mentee" value="mentee"><span class="checkbox">Mentee</span>

它应该根据您选择的复选框隐藏某些div。单击复选框时，它可以正常工作。但是，我还想在页面加载时触发更改功能。出于某种原因，它只调用第一个更改函数，在本例中是#mentee。如果我改变订单，那么另一个工作。它永远不会进入第二次change()电话。

有什么想法吗？

Answer 1

我会创建一个函数来确定选中哪个框并相应地隐藏div。然后，您可以将该函数用作更改事件和加载的回调。例如：

$(document).ready(function(){
  toggleDivs = function () {
    if($("#mentor").is(':checked')){
      hideMentorQuestions();
      showMenteeQuestions();
    }else if($("#mentee").is(':checked')){
      hideMenteeQuestions();
      showMentorQuestions();
    }
  }

  $('#mentor, #mentee').change(toggleDivs);
  toggleDivs();
});

在我看来，你似乎也想要 - 或者在这种情况下我建议使用单选按钮而不是复选框

Answer 2

您的说明表明您尚未将Javascript正确包装到document.ready()函数中，即

$(document).ready(function() {
    // your code here
});

我发现正在发生的事情是你的一个函数正在抛出异常，因为DOM尚未准备好。

即使你拥有得到document.ready处理程序，我认为关于异常的东西仍然可能是真的 - 某些条件在两个函数中都失败了，但只在第一次加载时失败。

Answer 3

通过更改hideMenteeQuestions()和showMenteeQuestions()函数来实现它：

function hideMenteeQuestions(){
  $("#menteeapp").hide();
  $("textarea[name='short_term_goals']").removeClass('required');
  $("textarea[name='long_term_goals']").removeClass('required');
}

function showMenteeQuestions(){
  $("#menteeapp").show();
  $("textarea[name='short_term_goals']").removeClass('required').addClass('required');
  $("textarea[name='long_term_goals']").removeClass('required').addClass('required');
}

使用jQuery基于复选框隐藏div

3 个答案: