在第一步 jQuery 步驟中刪除上一個按鈕

Question

我在我的網站注冊向導中使用 jQuery Steps，除了在第一步我得到上一個按鈕之外，它的工作很棒，這真的沒有意義，因為沒有以前的內容。

我看着onInit()的API函數，但沒有設定為enablePreviousButton ，只有enableFinishButton和enableCancelButton 。

有沒有辦法在第一步中刪除“上一步”按鈕？

請求的代碼：

$("#register-form").steps({
    headerTag: "h3",
    bodyTag: "fieldset",
    autoFocus: true,
    onInit: function (event, current) {
        alert(current);
    },
    labels: {
        finish: 'Sign Up <i class="fa fa-chevron-right"></i>',
        next: 'Next <i class="fa fa-chevron-right"></i>',
        previous: '<i class="fa fa-chevron-left"></i> Previous'
    }
});

HTML：

<h3><?= $lang_wizard_account; ?></h3>
<fieldset>
    <legend><?= $lang_text_your_details; ?></legend>
    <div class="form-group">
        <label class="control-label col-sm-3" for="username"><b class="required">*</b> <?= $lang_entry_username; ?></label>
        <div class="col-sm-8">
            <input type="text" name="username" value="<?= $username; ?>" class="form-control" placeholder="<?= $lang_entry_username; ?>" autofocus id="username" required>
            <?php if ($error_username) { ?>
            <span class="help-block error"><?= $error_username; ?></span>
            <?php } ?>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-3" for="firstname"><b class="required">*</b> <?= $lang_entry_firstname; ?></label>
        <div class="col-sm-8">
            <input type="text" name="firstname" value="<?= $firstname; ?>" class="form-control" placeholder="<?= $lang_entry_firstname; ?>" id="firstname" required>
            <?php if ($error_firstname) { ?>
            <span class="help-block error"><?= $error_firstname; ?></span>
            <?php } ?>
        </div>
    </div>
    .... 
</fieldset>

Answer 1

這具有相同的效果，但不那么hack-y：

.wizard > .actions > ul > li.disabled {
  display: none;
}

Answer 2

好的，非常丑陋的 hack 但它確實按預期工作：

$("#register-form").steps({
    headerTag: "h3",
    bodyTag: "fieldset",
    autoFocus: true,
    onInit: function (event, current) {
        $('.actions > ul > li:first-child').attr('style', 'display:none');
    },
    onStepChanged: function (event, current, next) {
        if (current > 0) {
            $('.actions > ul > li:first-child').attr('style', '');
        } else {
            $('.actions > ul > li:first-child').attr('style', 'display:none');
        }
    },
    labels: {
        finish: 'Sign Up <i class="fa fa-chevron-right"></i>',
        next: 'Next <i class="fa fa-chevron-right"></i>',
        previous: '<i class="fa fa-chevron-left"></i> Previous'
    }
});

感謝白盒！

Answer 3

這是使用 jQuery 的一個很好的解決方案：

$("a[href$='next']").hide();
$("a[href$='previous']").hide();

此解決方案允許您調用 .click() 函數以轉到下一個或上一個，如下所示：

$("a[href$='next']").click();

或者

$("a[href$='previous']").click();

Answer 4

以前的解決方案對我來說並不完全有效，但這確實有效：

.wizard > .actions > ul > li.disabled > a {
  background: white;
}