Question

我遇到了一个问题，我确信这是一个简单的解决方案，我无法理解。我有多个输入，只显示填写。继续进入第二部分后，第二个选择输入组命名为＆＃34;回答问题＆＃34;我想要检查值，这样如果值为＆＃34;是＆＃34;，则会显示下一个带标签的输入，否则它会跳过下一个标签并转到标签ID＆＃34; no-color＆＃34; 。由于尝试执行此操作，因此根本不会显示以下输入。

有人看到我做错了吗？

这是我添加的内容：

if($('#answered-question').val('Yes')){
            $nextLabel.has(":input").addClass("show");
        } else {
            $(":input").removeClass("show");
            $("#all-color-question").addClass("show");
        }

片段

＆＃13;

  $(".labelsGroup").each(function() {

    var $thatGroup = $(this);
    var $nextGroup = $thatGroup.next(".labelsGroup");
    var $inputs    = $thatGroup.find("input");
    var $proceed   = $thatGroup.find("button");

    $inputs.on("input", function(){
      var $nextLabel = $(this).closest("label").next("label");
      if($.trim(this.value).length > 3) {
        $nextLabel.has(":input").addClass("show");
      }
    });
	
	$('#has-color').on("change", function(){
		var $nextLabel = $(this).closest("label").next("label");
        if($('#has-color').val()){
            $nextLabel.has(":input").addClass("show");
        } else {
            $nextLabel.has(":input").removeClass("show");
        }
    });
	$('#answered-question').on("change", function(){
		var $nextLabel = $(this).closest("label").next("label");
        if($('#answered-question').val('Yes')){
            $nextLabel.has(":input").addClass("show");
        } else {
            $(":input").removeClass("show");
			$("#all-color-question").addClass("show");
        }
    });
    $proceed.on("click", function(e){
		$("html, body").animate({ scrollTop: 0 }, 200);
		e.preventDefault();
      
      var allValid = $inputs.filter(function() { 
        return $.trim(this.value).length > 3;
      }).length === $inputs.length;
      // TODO: use a better validation plugin than the above

      if(allValid) { // Finally proceed!!
        $thatGroup.addClass("hide");
        $nextGroup.addClass("show");
        // TODO: Submit form using AJAX to a service
      } else {       // or Log error!!
        return alert("Please fill-in the missing fields!");
      }

    });

  });

＆＃13;

.labelsGroup {
	text-align: center;
}
.labelsGroup label {
	display: block;
	margin: 50px 0;
	font-size: 1.4em;
}
.labelsGroup label input, .labelsGroup label select {
	background: #fff;
	padding: 15px 15px;
	border: 1px solid #999;
	width: 40%;
	font-size: 1.3em !important;
}
.labelsGroup input, .labelsGroup select {
	margin-top: 20px;
}
.proceed-button {
	background: #0085A1;
	color: #FFF;
	padding: 15px 20px;
	border: none;
	font-size: 1.2em;
	margin-top: 15px;
	cursor: pointer;
	webkit-transition: .7s ease;
	transition: .7s ease;
	display: inline-block;
	width: auto;
}
.proceed-button:hover {
	background: #005b6e;
	webkit-transition: .7s ease;
	transition: .7s ease;
}	
/* hide all but first label in parent */
/* hide all subsequent labelsParents */
.labelsGroup label + label,
.labelsGroup + .labelsGroup,
.hide {
	opacity: 0;
	visibility: hidden;
	position: absolute;
}
.show {
	opacity: 1 !important;
	visibility: visible !important;
	position: relative !important;
	-webkit-transition: opacity 0.7s ease-in;
	transition: opacity 0.7s ease-in;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="labelsGroup">
			<div class="container-intro">First, let's find out a little bit about you.</div>
			<label>
			What is your name?<br>
				<input name="name" type="text"><!-- PS: use name="" instead of id=""-->
			</label>
			<label>
			Phone Number<br>
				<input name="phone-number" type="email">
			</label>
			<label>
				<button class="proceed-button">PROCEED</button>
			</label>
		</div>
		<div class="labelsGroup">
			<div class="container-intro">Now let's go over existing information.</div>
			<label>
				Have a favorite color?<br>
				<select name="color-question" id="has-color">
					<option value="" disabled selected>Please choose option</option>
					<option value="Yes">Yes</option>
					<option value="No">No</option>
				</select>
			</label>
			<label>
				Do you frequenly choose this color?<br>
				<select name="answered-question">
					<option value="" disabled selected>Please choose option</option>
					<option value="Yes">Yes</option>
					<option value="No">No</option>
				</select>
			</label>
			<label>
				List your favorite color(s)<br>
				<input name="color-select" type="text">
			</label>
			<label id="no-color">
				Do you like all colors?<br>
				<select name="all-color-question" id="all-color-question">
					<option value="" disabled selected>Please choose option</option>
					<option value="Yes">Yes</option>
					<option value="No">No</option>
				</select>
			</label>
			<label>
				<button class="proceed-button">PROCEED</button>
			</label>
		</div>

＆＃13;

Answer 1

看起来你有两个问题 - 一个是HTML，另一个是JavaScript。

您需要在回答问题选择中使用ID。目前它只有一个名字。 jQuery中的＃选择器只会选择ID。

<select name="answered-question">
    <option value="" disabled selected>Please choose option</option>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
</select>

您应该添加如下ID：

<select name="answered-question" id="answered-question">
    <option value="" disabled selected>Please choose option</option>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
</select>

另一个问题是在回答问题更改脚本中。您实际上将其设置为是，而不是检查值是否为是。您需要更改

中的if语句

if($('#answered-question').val('Yes'))

到

if($('#answered-question').val() == 'Yes')

我在这里有一个工作的JSFiddle： https://jsfiddle.net/4nwpLk7a/

根据值显示特定输入

1 个答案: