Question

我正在尝试用4个步骤创建一个简单的步骤表单。我创建了i = 1来控制当前步骤，而不是click函数内部，我增加i++以便下一次点击事件显示下一步：

var i = 1;

  if (i <= 4 ) {
    $('.step' + i).each(function(){
      $(this).find('a').on('click', function(e){
        e.preventDefault();

        i++;

        $('.step' + i).animate({opacity: 1}, 200);
      });
    });
  };

正如您所看到的，我使用.each和click事件来获取当前<a>点击，但它无效。一些帮助将不胜感激。

EDIT -------

Js fiddle：https://jsfiddle.net/gtsjhe1y/

Answer 1

https://jsfiddle.net/gtsjhe1y/2/ 它没有找到正确的方法。试试这个。

$(this).parent().find('a').on('click', function(e){

Answer 2

您只需要更改此行$('.step').each(function(){...

var i = 1;

if (i <= 4 ) {
$('.step').each(function(){
  $(this).find('a').on('click', function(e){
    e.preventDefault();
    i++;
    $('.step' + i).animate({opacity: 1}, 200);
   });
 });
};

jsfiddle示例。

Answer 3

到按下按钮的那一刻，变量“i”的值将等于4.例如，你可以将你的绑定包装到匿名函数并传递“i”作为它的参数，有些像这样：

$('.step' + i).each(function(){
  (function(i){
     $(this).find('a').on('click', function(e){
       e.preventDefault();

       $('.step' + i).animate({opacity: 1}, 200);
     });
  })(i++);
});

Answer 4

你的代码是这样做的： 1- i = 1 2-如果i <4，则该条件将运行ONCE，因为它不在循环或函数中 3- $（＆＃39; .step＆＃39; + i）其中i = 1所以这将只返回一个值step1元素 4-.each将运行一次因为它正在处理一个元素step1 注意：所以＆＃34; .on＆＃34;你正在做的将只绑定step1链接而不是其他元素 5-在你回调中点击＆＃34;仅在步骤1和＃34; i ++递增i值。

所以下次单击步骤1中的链接将显示下一个元素。

所以其他链接没有链接到＆＃34;点击＆＃34;如果你点击它将刷新页面

简单的步骤表格不起作用

4 个答案: