0
私は確かに簡単な修正であるという問題にぶつかりつつあります。私は記入されている場合にのみ表示される複数の入力を持っています。 2番目のセクションに進むと、2番目の選択入力グループの "answered-question"は値を確認したいので、値が "Yes"の場合は次のラベル付き入力が表示され、それ以外の場合は次のラベルラベルid "no-color"に移動します。これを試行して以来、以下の入力はまったく表示されません。値に基づいて特定の入力を表示
誰かが私が間違っているのを見ていますか？
これは私が追加するものである：
if($('#answered-question').val('Yes')){
$nextLabel.has(":input").addClass("show");
} else {
$(":input").removeClass("show");
$("#all-color-question").addClass("show");
}
スニペット
$(".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");
}
});
\t
\t $('#has-color').on("change", function(){
\t \t var $nextLabel = $(this).closest("label").next("label");
if($('#has-color').val()){
$nextLabel.has(":input").addClass("show");
} else {
$nextLabel.has(":input").removeClass("show");
}
});
\t $('#answered-question').on("change", function(){
\t \t var $nextLabel = $(this).closest("label").next("label");
if($('#answered-question').val('Yes')){
$nextLabel.has(":input").addClass("show");
} else {
$(":input").removeClass("show");
\t \t \t $("#all-color-question").addClass("show");
}
});
$proceed.on("click", function(e){
\t \t $("html, body").animate({ scrollTop: 0 }, 200);
\t \t 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!");
}
});
});.labelsGroup {
\t text-align: center;
}
.labelsGroup label {
\t display: block;
\t margin: 50px 0;
\t font-size: 1.4em;
}
.labelsGroup label input, .labelsGroup label select {
\t background: #fff;
\t padding: 15px 15px;
\t border: 1px solid #999;
\t width: 40%;
\t font-size: 1.3em !important;
}
.labelsGroup input, .labelsGroup select {
\t margin-top: 20px;
}
.proceed-button {
\t background: #0085A1;
\t color: #FFF;
\t padding: 15px 20px;
\t border: none;
\t font-size: 1.2em;
\t margin-top: 15px;
\t cursor: pointer;
\t webkit-transition: .7s ease;
\t transition: .7s ease;
\t display: inline-block;
\t width: auto;
}
.proceed-button:hover {
\t background: #005b6e;
\t webkit-transition: .7s ease;
\t transition: .7s ease;
} \t
/* hide all but first label in parent */
/* hide all subsequent labelsParents */
.labelsGroup label + label,
.labelsGroup + .labelsGroup,
.hide {
\t opacity: 0;
\t visibility: hidden;
\t position: absolute;
}
.show {
\t opacity: 1 !important;
\t visibility: visible !important;
\t position: relative !important;
\t -webkit-transition: opacity 0.7s ease-in;
\t transition: opacity 0.7s ease-in;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="labelsGroup">
\t \t \t <div class="container-intro">First, let's find out a little bit about you.</div>
\t \t \t <label>
\t \t \t What is your name?<br>
\t \t \t \t <input name="name" type="text"><!-- PS: use name="" instead of id=""-->
\t \t \t </label>
\t \t \t <label>
\t \t \t Phone Number<br>
\t \t \t \t <input name="phone-number" type="email">
\t \t \t </label>
\t \t \t <label>
\t \t \t \t <button class="proceed-button">PROCEED</button>
\t \t \t </label>
\t \t </div>
\t \t <div class="labelsGroup">
\t \t \t <div class="container-intro">Now let's go over existing information.</div>
\t \t \t <label>
\t \t \t \t Have a favorite color?<br>
\t \t \t \t <select name="color-question" id="has-color">
\t \t \t \t \t <option value="" disabled selected>Please choose option</option>
\t \t \t \t \t <option value="Yes">Yes</option>
\t \t \t \t \t <option value="No">No</option>
\t \t \t \t </select>
\t \t \t </label>
\t \t \t <label>
\t \t \t \t Do you frequenly choose this color?<br>
\t \t \t \t <select name="answered-question">
\t \t \t \t \t <option value="" disabled selected>Please choose option</option>
\t \t \t \t \t <option value="Yes">Yes</option>
\t \t \t \t \t <option value="No">No</option>
\t \t \t \t </select>
\t \t \t </label>
\t \t \t <label>
\t \t \t \t List your favorite color(s)<br>
\t \t \t \t <input name="color-select" type="text">
\t \t \t </label>
\t \t \t <label id="no-color">
\t \t \t \t Do you like all colors?<br>
\t \t \t \t <select name="all-color-question" id="all-color-question">
\t \t \t \t \t <option value="" disabled selected>Please choose option</option>
\t \t \t \t \t <option value="Yes">Yes</option>
\t \t \t \t \t <option value="No">No</option>
\t \t \t \t </select>
\t \t \t </label>
\t \t \t <label>
\t \t \t \t <button class="proceed-button">PROCEED</button>
\t \t \t </label>
\t \t </div>
まず最初は、あなたの状態が動作しているかどうかをテストすることです：あなたは、私がここで働いJSFiddleを持って
から
にif文を変更する必要がありますあなたの状態が真であれば警告を表示します。 Jqueryを使用している場合、トグル機能を試してみましたか？ http://api.jquery.com/toggle/ $（ ".target"）.toggle（）; –
私は入力が一貫して私のクラスの表示/非表示を使用したいと思っています...ちょうど値に基づいて表示するこの特定のものを得ることができません。 – Paul