在第一步 jQuery 步骤中删除上一个按钮答案

【问题标题】：Removing Previous Button on First Step jQuery Steps在第一步 jQuery 步骤中删除上一个按钮
【发布时间】：2015-05-25 06:45:00
【问题描述】：

我正在为我的网站注册向导使用 jQuery Steps，效果非常好，只是在第一步我得到了上一个按钮，这真的没有意义，因为没有以前的内容。

我查看了 API 中的onInit() 函数，但没有设置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>

【问题讨论】：

如果您发布一些代码会有所帮助
已发布代码，不知道有什么帮助，但确实有。
显然这里的 html 太多了，我将添加一个字段集，它是每个向导片段的内容。
我想你可以在页面加载时隐藏上一个按钮，当你循环到下一页时插件会优雅地显示它，这就是解决方案。
那么使用基本的 jQuery 而不是使用插件 API 本身？

标签： javascript jquery jquery-steps

【解决方案1】：

这具有相同的效果，但不那么骇人听闻：

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

【讨论】：

@Anirudh 我知道这已经有一段时间了，但这会放在您用来设置向导样式的 *.css 文件中。（或在本地 *.html 文件的样式标签中）..

【解决方案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'
    }
});

感谢白盒！

【讨论】：

对不起，我没有早点回到这个问题上，这正是我的想法 - 看起来你必须对 jquery 进行一些处理！

【解决方案3】：

这是使用 jQuery 的一个很好的解决方案：

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

这个解决方案允许你调用 .click() 函数去下一个或上一个，像这样：

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

或

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

【讨论】：

【解决方案4】：

以前的解决方案对我来说不太奏效，但这确实有效：

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

【讨论】：