单击并增加计数器后隐藏控件并显示下一个控件

Question

我在 HTML 中有多个控件。它们由li 和按钮等组成。

最初我想显示第一个控件，然后在选择项目后，我得到值，然后我得到另一个控件，即按钮，单击后，我得到另一个按钮，依此类推。

我还有一个跨度类，它随着完成的步骤数而递增，如下所示：

<span id="step-count">1</span>

<ul id="user">
  <li class="mdl-menu__item">User 1</li>
  <li class="mdl-menu__item">User 2</li>
  <li class="mdl-menu__item">User 3</li>

</ul>

<!-- Step 2 -->
<button id="cost">Add cost</button>

<!-- Step 3 -->
<button id="work">Create a work</button>

基本上我所做的如下：

$(function() {
  var count = 1;
  $('#cost').hide();
  $("#work").hide();
  $("#step-count").text(count);

  $("#user li").click(function() {
    console.log('I am in..');
    var $this = $(this);
    alert($this.text());
    $('#user').hide();
    count++;
    $('#cost').show();
    $("#step-count").text(count);
  });

  $("#cost").click(function() {
    console.log("Costing menu in..");

    $("#cost").hide();
    count++;
    $("#work").show();
    $("#step-count").text(count);
  });
});

有人可以建议我以更好的方式执行此操作吗，假设如果我有 30 个不同的控件，我不能每次单击时都隐藏上一个控件并显示下一个控件。

为李编辑的部分

    <div id="steps">
        <button class="mdl-button mdl-js-button user-menu mdl-button--raised mdl-js-ripple-effect">
         Add User
        </button>

        <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu js-user-menu mdl-js-ripple-effect" for="user-menu">
            <li class="mdl-menu__item">User 1</li>
            <li class="mdl-menu__item">User 2</li>
            <li class="mdl-menu__item">User 3</li>
            <li class="mdl-menu__item">User 4</li>
            <li class="mdl-menu__item">User 5</li>
        </ul>

基本上，上面显示了一个按钮，当我单击该按钮时，它会给我一个下拉列表，我可以在其中选择一个项目。在我选择一个项目后，它会消失而不显示下一个组件。你能帮忙吗？

Answer 1

您可以在任何步骤元素上使用 Common 类。那么当点击 1 时，你可以通过一些属性来确定当前步骤是什么，然后确定谁是下一个。

HTML： 1

<ul id="">
  <li class="mdl-menu__item step" attr-step="1">User 1</li>
  <li class="mdl-menu__item step" attr-step="1">User 2</li>
  <li class="mdl-menu__item step" attr-step="1">User 3</li>
</ul>

<!-- Step 2 -->
<button class="step" attr-step="2">
  Add cost
</button>

<!-- Step 3 -->
<button class="step" attr-step="3">
  Create a work
</button>


<button class="step" attr-step="4"> Create foo </button>
<button class="step" attr-step="5"> Create bar </button>

Javascript

$(function () {
        $counter = $('#step-count');
$allStep = $('.step');
var counter = 1;
$allStep.hide();
    $('.step[attr-step="'+counter+'"]').show();  

    $allStep.on('click',function() {
    //Get current step number.
        counter = parseInt($(this).attr('attr-step'));
        counter++;
  //Inc and update UI
  $counter.text(counter);
        $allStep.hide(); //Hide all
        $('.step[attr-step="'+counter+'"]').show(); // Display only current.  
    });
});

附上在线示例：https://jsfiddle.net/j5ce2hah/16/

---- 更新每一步的特定特征---- 您现在有返回 jquery ajax 对象实例的有效负载对象。并基于完成的承诺，我们更新视图并进入下一步。

更多关于 jquery ajax 请求的信息：http://api.jquery.com/jquery.getjson/

 $(function () {
        var payloads = {
        getUser : function($step) {
                return $.getJSON( "/echo/json/",{'id': $step.attr('attr-user-id')}, function() {});      
      },
      getCost : function($step) {
                return $.getJSON( "/echo/json/", function() {});      
      },
      getWork : function($step) {
                return $.getJSON( "/echo/json/", function() {});      
      },
    };

        /**
        Init app
    **/
        $counter = $('#step-count');
    $allStep = $('.step');
    var counter = 1;
    $allStep.hide();
        $('.step[attr-step="'+counter+'"]').show();  
    //Step click handler
        $allStep.on('click',function() {
        //Get current step number.
            counter = parseInt($(this).attr('attr-step'));
            //Get whitch payload you want to run.
            var payload = $(this).attr('attr-payload');
            //When payload answer done,         
      payloads[payload]($(this)).done(function(data) {
        //Do what ever you want with answer.
        console.log(data);
        counter++;
        //Increment and update UI
        $counter.text(counter);
        $allStep.hide(); //Hide all
        $('.step[attr-step="'+counter+'"]').show(); // Display only current.  
      });
        });
 });

在线示例：https://jsfiddle.net/j5ce2hah/28/

Answer 2

您可以将所有步骤包含在父级<div id="steps"> 中，并使用父级选择其所有子级，在开头隐藏它们，并为它们附加一个事件侦听器。您可以将this 用于当前孩子并使用next() 用于下一个孩子，从而从一个孩子移动到另一个孩子。检查next.length，看看你是否到达了最后一步。

编辑如果您要为每个步骤调用不同的函数，请创建这些函数，这些函数具有相同的名称，并在末尾加上步骤编号（例如 doJob1、doJob2、doJob3）。这样您就可以使用window 对象调用它们。

$(function() {
  var count = 1;
  var steps = $('#steps > *');
  steps.hide();
  $('#user').show();
  $("#step-count").text(count);

  steps.click(function() {
    window["doJob" + count]();
    var current = $(this);
    var next = current.next();
    if (next.length > 0) {
      current.hide();
      next.show();
      count++;
      $("#step-count").text(count);
    }
  });
});

function doJob1() {
  console.log("step 1");
}

function doJob2() {
  console.log("step 2");
}

function doJob3() {
  console.log("step 3");
}

function doJob4() {
  console.log("step 4");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="step-count">1</span>
<div id="steps">
  <button id="user" class="mdl-button mdl-js-button user-menu mdl-button--raised mdl-js-ripple-effect">Add User</button>
  <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu js-user-menu mdl-js-ripple-effect" for="user-menu">
    <li class="mdl-menu__item">User 1</li>
    <li class="mdl-menu__item">User 2</li>
    <li class="mdl-menu__item">User 3</li>
    <li class="mdl-menu__item">User 4</li>
    <li class="mdl-menu__item">User 5</li>
  </ul>
  <!-- Step 2 -->
  <button id="cost">Add cost</button>
  <!-- Step 3 -->
  <button id="work">Create a work</button>
</div>