Question

我有一个允许用户输入输入的系统，然后在填写时会在其下面显示一个新的输入。我遇到的问题是我试图在输入中添加标签，当我更改代码时，它不再增加新的投入。

该代码段没有标签。 This is a Fiddle with my attempt at adding the labels

有人看到我做错了吗？

$(function () {   
    var elems = $('.intro').on('input', function() {
        
        if ( this.value.trim().length > 2 ) {
        		$(this).next('input').addClass('block');
        }

        
        $('#intro-button').toggle(
            elems.filter(function() {
            	return this.value.trim() !== "";
            }).length === elems.length
        )
        
    });
});

.intro {
	opacity: 0;
	padding: 10px 15px;
	margin: 40px auto;
	visability: hidden;
}
.intro:first-child {
	display: block;
	opacity: 1;
}
.block {
	display: block;
	visability: visible;
	opacity: 1;
   -webkit-animation: fadein 1s ease-in;
   -moz-animation: fadein 1s ease-in;
    animation: fadein 1s ease-in;
}
.next {
	display: none;
}
.button-center {
	margin: 40px auto;
	text-align: center;
}
#intro-button {
	display: none;
	padding: 10px 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

		<div id="intro-info">
				<input id="name" type="text" class="intro">
				<input id="email" type="email" class="intro">
			<input id="title" type="text" class="intro">
			<div class="button-center">
				<button id="intro-button">Proceed</button>
			</div>
		</div>

Answer 1

label事件不存在。您可以调整现有js以使用this.firstElementChild

$(function() {
  var elems = $('.intro').on('input', function() {
    if (this.firstElementChild.value.trim().length > 2) {
      $(this).next('label').addClass('block');
    }


    $('#intro-button').toggle(
      elems.filter(function() {
        return this.firstElementChild.value.trim() !== "";
      }).length === elems.length
    )

  });
});

jsfiddle https://jsfiddle.net/xfbLskhn/4/

Answer 2

您需要添加处理程序以输入并在输入的父项上移动

$(function() {
  var elems = $('.intro input').on('keypress', function() {

    if ($(this).val().trim().length > 2) {
      $(this).parent().next('label').addClass('block');
    }


    $('#intro-button').toggle(
      elems.filter(function() {
        return this.value.trim() !== "";
      }).length === elems.length
    )

  });
});

https://jsfiddle.net/xfbLskhn/3/

更改下一个值中断代码

2 个答案: