Question

我有一个JavaScript处理一些PHP代码，如下所示：

$(function(){
    $("#hosted_prev_no").change(function(){ 
        $("#attend").show();
        $("#eligible").hide();
    });
    $("#hosted_prev_yes").change(function(){
        $("#attend").hide();
        $("#eligible").show();
    });
    $("#attend_prev_yes").change(function(){
        $("#eligible").show();
    });
    $("#attend_prev_yes").change(function(){
        $("#eligible").hide();    
    });

php代码如下：

  <div class="full row column">
    <label id="hosted_prev_label" for="hosted_prev" class="required">Have you hosted a Road Scholar program for Stetson University in the past?</label>
    <label id="hosted_prev_yes_label" for="hosted_prev_yes">Yes</label>
    <input id="hosted_prev_yes" name="hosted_prev" type="radio" value="Yes" />
    <label id="hosted_prev_no_label" for="hosted_prev_no">No</label>
    <input id="hosted_prev_no" name="hosted_prev" type="radio" value="No" /><br />
    <div id="attend" class="hidden">
      <label id="atend_prev_label" for="atend_prev" class="required">Have you attended at least one Stetson Road Scholar program in the past?</label>
      <label id="attend_prev_yes_label" for="attend_prev_yes">Yes</label>
      <input id="attend_prev_yes" name="attend_prev" type="radio" value="Yes" />
      <label id="attend_prev_no_label" for="hosted_prev_no">No</label>
      <input id="attend_prev_no" name="attend_prev" type="radio" value="No" /><br />
    </div>
    <div id="ineligible" class="hidden">
      <p>All hosts are required to attend at least one Stetson University Road Scholar program before they may host p program. You may apply again once you have attended a Stetson University Road Scholar program. Thank you for your interest.</p>
    </div>
  </div>
  <div id="eligible" class="full row column hidden">
    <h2>Cohost Information</h2>
    <label id="is_cohost_label" for="is_cohost" class="required">Will you be hosting with anyone?</label>
    <label id="is_cohost_yes_label" for="is_cohost_yes">Yes</label>
    <input id="is_cohost_yes" name="is_cohost" type="radio" value="Yes" />
    <label id="is_cohost_no_label" for="is_cohost_no">No</label>
    <input id="is_cohost_no" name="is_cohost" type="radio" value="No" /><br />
  </div>

问题是第二个无线电不显示“eligible”div。你怎么知道哪个变更函数优先？

Answer 1

您绑定了两次相同的元素：

$("#attend_prev_yes").change(function(){
    $("#eligible").show();
});
$("#attend_prev_yes").change(function(){
    $("#eligible").hide();    
});

我认为你需要的是：

$("#attend_prev_yes").change(function(){
    $("#eligible").show();
});
$("#attend_prev_no").change(function(){
    $("#eligible").hide();    
});

如果两个更改函数作用于同一个id，它将优先使用？

1 个答案: