1

我的网站上有一个预订表格，如果我选择 10 人以上，那么展位的表格选项就会消失，因为他们最多只能容纳 9 人。这一切正常，这是我的脚本：

$(document).ready(function(){
$('#form1_people').on('change',function(){
    if( $(this).val()==="10+ People"){
    $("#tenplus").hide()
        $("#booth-notice").show()
    }
    else{
    $("#tenplus").show()
        $("#booth-notice").hide()
        }
    });
});

我的问题是在主页上我有一个快速预订表格，当用户填写它并自动更新大表格时。但是，如果我从主页中选择 10 多个人，则 JavaScript 不会执行。

我以为我需要在每个页面上都有这个 JavaScript？我试过这个，但它不起作用。我没主意了。任何人？

谢谢

更新！！！！

                <div>
            <label for="form1_people">How many people:</label>
                <select id="form1_people" name="people" class="venue-select">
                    <option value="Select how many people">Select how many people</option>
                    <option value="2 People">2 People</option>
                    <option value="3 People">3 People</option>
                    <option value="4 People">4 People</option>
                    <option value="5 People">5 People</option>
                    <option value="6 People">6 People</option>
                    <option value="7 People">7 People</option>
                    <option value="8 People">8 People</option>
                    <option value="9 People">9 People</option>
                    <option value="10 People">10 People</option>
                    <option value="10+ People">10+ People</option>
                </select>
            </div>

            <div id="booth-notice" style="display:none;">
                <label style="color: #ed1c24!important; font-size: 16px!important; line-height: 1.4em!important;"><em style="color: #ed1c24!important;">Customer Notice * Booths are not available for parties with more than 10 people</em></label>
            </div>

            <div id="tenplus"><!-- HIDE THESE IF THERE IS MORE THAN 10 PEOPLE -->           
                <div>
                    <label for="form1_booth">Would you like a Booth: <em>*Liverpool &amp; Manchester Only</em> <a href="#">What's this?</a></label>
                    <select id="form1_booth" name="booth" class="venue-select">
                        <option value="Please select an option">Please select an option</option>
                        <option value="Yes">Yes</option>
                        <option value="No">No</option>
                    </select>
                </div>

                <div>
                    <label for="form1_booth-package">We have some Booth Packages <a href="#">What's this?</a></label>
                    <select id="form1_booth-package" name="booth-package" class="venue-select">
                        <option value="Select an option if wanting a booth">Select an option if wanting a booth</option>
                        <option value="Bier Package">Bier Package</option>
                        <option value="Cocktail Package">Cocktail Package</option>
                        <option value="Just a booth please">Just a booth please</option>
                    </select>
                </div>

            </div><!-- HIDE THESE IF THERE IS MORE THAN 10 PEOPLE -->
4

2 回答 2

1

我认为你应该改变你的逻辑，我现在将解释我会做什么。

您的 JavaScript 编写正确，但仅在“更改”事件发生时才调用。因此，当您从主页发布帖子后加载页面时，选择值已经更改，您的函数将不会被调用。

你可以做这样的事情。它不是很优雅，但它可以完成你的工作：

$(document).ready(function(){
    boothUpdate(); // This function is called at every page load
    $('#form1_people').on('change',function(){
        boothUpdate(); // This function is called at every select change
    });    
});

function boothUpdate() {
    if( $(this).val()==="10+ People"){
        $("#tenplus").hide()
        $("#booth-notice").show()
    }
    else {
        $("#tenplus").show()
        $("#booth-notice").hide()
    }
}
于 2013-09-26T15:50:11.207 回答
0

我设法通过.trigger('change');在函数末尾添加来对此进行排序。

完整的工作脚本在这里：

$(document).ready(function(){   
    $('#form1_people').on('change',function(){
        if( $(this).val()=="10+ People"){
            $("#tenplus").hide()
            $("#booth-notice").show()
        }
        else{
            $("#tenplus").show()
            $("#booth-notice").hide()
       }
   }).trigger('change');
});

谢谢大家的帮助...

于 2013-09-27T09:46:06.080 回答