Question

我想知道如何在此代码中使用触发功能

    function showHusbandFun(){
    var mStatus = document.getElementById('marital_status').value;
    if(mStatus == 'Married'){
       $("#spousehide").show(); 
        $("#spousehideOther").show();       
    }else{       
       $("#spouse_name").val("");
       $("#spouse_nationality").val("");
       $("#spouse_place_of_birth").val("");
       $("#spouse_country_of_birth").val("");
       $("#spousehide").hide();
       $("#spousehideOther").hide();
    }
}

这是我控制隐藏Divs的Select元素

<select class="form-control-input" name="marital_status" id="marital_status" onclick="removeError(this.id);" onchange="removeError(this.id); showHusbandFun();">
                    <option selected="selected" value="">Select Marital Status</option>
                    <option value="Single" <?php if($marital == 'Single'){ echo "selected";}?>> Single</option>
                    <option value="Married" <?php if($marital == 'Married'){ echo "selected";}?>> Married</option>
                    <option value="Divorced" <?php if($marital == 'Divorced'){ echo "selected";}?>> Divorced</option>
                     <option value="Widow" <?php if($marital == 'Widow'){ echo "selected";}?>> Widow</option>

                    <option value="Deceased" <?php if($marital == 'Deceased'){ echo "selected";}?>> Deceased</option>
                    <option value="Unspecific" <?php if($marital == 'Unspecific'){ echo "selected";}?>> Unspecific</option>                 
                    <option value="Child" <?php if($marital == 'Child'){ echo "selected";}?>> Child</option>
                </select>

我想在其中使用触发功能来控制显示/隐藏元素。但是问题是页面加载时，我要在婚姻状态为结婚时显示隐藏的Divs。

Answer 1

问题是您没有在页面加载时调用该函数，并且期望它在页面加载时可以工作。当前，showHusbandFun()上进行更改时会触发功能SELECT。您可以这样做：

$(function() {
  // This is document ready function
  // This will trigger as soon as the document ready event fires
  showHusbandFun();
});

这样，将应用一次在页面加载时进行一次更改，然后在您的SELECT更改时也可以按预期进行的操作。

如有任何混淆，请告知我。

Answer 2

jQuery提供了一个回调，通知页面何时加载。您要做的就是在“ document.ready”回调中调用该函数。以下代码片段可以处理您的情况：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
	function removeError(id){
	//console.log(id);
}

function showHusbandFun(){
    var mStatus = document.getElementById('marital_status').value;
    if(mStatus == 'Married'){
       $("#spousehide").show(); 
        $("#spousehideOther").show();       
    }else{       
       $("#spouse_name").val("");
       $("#spouse_nationality").val("");
       $("#spouse_place_of_birth").val("");
       $("#spouse_country_of_birth").val("");
       $("#spousehide").hide();
       $("#spousehideOther").hide();
    }
}

$(document).ready(function(){
  showHusbandFun();
});
</script>

<select class="form-control-input" name="marital_status" id="marital_status" onclick="removeError(this.id);" onchange="removeError(this.id); showHusbandFun();">
                    <optio selected value="">Select Marital Status</option>
                    <option value="Single"> Single </option>
                    <option  value="Married"> Married </option>
                    <option value="Divorced"> Divorced </option>
                     <option value="Widow"> Widow </option>

                    <option value="Deceased"> Deceased </option>
                    <option value="Unspecific"> Unspecific</option>                  
                    <option value="Child"> Child </option>
</select>

<div id="spousehide">Spouse</div>
<div id="spousehideOther">Spouse other</div>
<div id="spouse_name">Spouse Name</div>
<div id="spouse_place_of_birth">Spouse Nationality</div>
<div id="spouse_country_of_birth">Spouse Country of Birth</div>

Answer 3

在脚本内部的showHusbandFun()外部调用onchange()。然后将在页面加载时调用它，您应该获得期望的结果。

如何使用触发功能控制div的显示或隐藏

3 个答案: