jQuery JavaScript函數順序

Question

我有一個問題，其中JS函數/代碼的順序更改了頁面的行為。

有一個jQuery驗證部分，然后是帶有進度條的Bootstrap向導“ onTabShow”部分。

驗證按此順序進行，但是進度欄為空。

如果切換順序，進度條將起作用，但是Bootstrap向導的每個選項卡上都沒有驗證。

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

            // WORKING
            var $validator = $("#entry_form").validate({
              rules: {
                firstname: {
                  required: true
                },
                hole1score: {
                    required: true
                },
                hole2score: {
                    required: true
                },
                hole3score: {
                    required: true
                },
                hole4score: {
                    required: true
                },
                hole5score: {
                    required: true
                },
                hole6score: {
                    required: true
                },
                hole7score: {
                    required: true
                },
                hole8score: {
                    required: true
                },
                hole9score: {
                    required: true
                }
              },
              messages: {
                hcap: "A number is required"
              }
            });

            // WORKING              
            $('#rootwizard').bootstrapWizard({
                'tabClass': 'nav nav-pills',
                'onNext': function(tab, navigation, index) {
                    var $valid = $("#entry_form").valid();
                    if(!$valid) {
                        $validator.focusInvalid();
                        return false;
                    }
                }
            });

            // THIS SECTION ISNT WORKING IN THIS LOCATION...
            $('#rootwizard').bootstrapWizard({onTabShow: function(tab, navigation, index) {
                var $total = navigation.find('li').length;
                var $current = index+1;
                var $percent = ($current/$total) * 100;

                $('#rootwizard .progress-bar').css({width:$percent+'%'});
            }});

            // WORKING
            $(".btn-group :input").change(function() {
                $('input[name="' + $(this).parent().parent().attr('id') + '"]').val($(this).val());
            }); 

        });
    </script>

我確定它與代碼的順序或適當功能的使用有關。 按照目前的順序，它更有可能是“ return false”； 驗證器部分中的代碼行...但是我對JS的理解不足以解決問題。

Answer 1

罪魁禍首可能是您使用不同的選項再次定義了選項卡。 jQuery插件在后續初始化中的行為尚不明確。

有些會忽略第二種嘗試，而另一些會將新選項添加​​到現有的選項中。 有些人將僅使用最新選項重新初始化插件。

在這種情況下，最好將它們組合成一個初始化調用。

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

        var $validator = $("#entry_form").validate({
          rules: {
            firstname: {
              required: true
            },
            hole1score: {
                required: true
            },
            hole2score: {
                required: true
            },
            hole3score: {
                required: true
            },
            hole4score: {
                required: true
            },
            hole5score: {
                required: true
            },
            hole6score: {
                required: true
            },
            hole7score: {
                required: true
            },
            hole8score: {
                required: true
            },
            hole9score: {
                required: true
            }
          },
          messages: {
            hcap: "A number is required"
          }
        });

        $('#rootwizard').bootstrapWizard({
            'tabClass': 'nav nav-pills',
            'onNext': function(tab, navigation, index) {
                var $valid = $("#entry_form").valid();
                if(!$valid) {
                    $validator.focusInvalid();
                    return false;
                }
            },
            'onTabShow': function(tab, navigation, index) {
                var $total = navigation.find('li').length;
                var $current = index+1;
                var $percent = ($current/$total) * 100;

                $('#rootwizard .progress-bar').css({width:$percent+'%'});
            }
        });

        $(".btn-group :input").change(function() {
            $('input[name="' + $(this).parent().parent().attr('id') + '"]').val($(this).val());
        }); 

    });
</script>