我正在尝试创建一个警报系统，让用户知道他们让字段为空。如果一个字段留空并且按下下一个按钮则会出现警报，如果同一字段再次为空且按下该按钮（将显示2个警报）。警报持续增加3,4,5 ...等，直到所有字段都完成。我该如何制作才能只显示一个警报？
将字段留空并按下＆＃34;下一步按钮＆＃34;在我的代码中，关闭警报并再次按下下一个按钮。解除第一个警报，然后你应该看到第二个警报。我怎样才能防止这种情况发生？
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
$(".next").click(function(){
document.getElementById('btnNext').addEventListener('click',
function(){
//text inputs
if(!document.getElementById('fullname').value){
alert('Full Name is required');
return false;
}
else if(!document.getElementById('email').value){
alert('Email is required');
return false;
}
else if(!document.getElementById('phone').value){
alert('Phone Number is required');
return false;
}
else if(!document.getElementById('age').value){
alert('Age is required');
return false;
}
//radio buttons
var genderSet = false;
var genderBtns = document.getElementsByName('gender');
//console.log(genderBtns);
for(var i = 0, btn; btn = genderBtns[i];++i){
if(btn.checked){
genderSet = true;
break;
}
}
if(!genderSet){
alert('Gender is required');
return false
}
if(animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50)+"%";
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'transform': 'scale('+scale+')'});
next_fs.css({'left': left, 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
});
$(".previous").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
//de-activate current step on progressbar
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
//show the previous fieldset
previous_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale previous_fs from 80% to 100%
scale = 0.8 + (1 - now) * 0.2;
//2. take current_fs to the right(50%) - from 0%
left = ((1-now) * 50)+"%";
//3. increase opacity of previous_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'left': left});
previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".submit").click(function(){
return false;
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Step 1</h2>
<h3 class="fs-subtitle">Background Information</h3>
<input type="text" id="fullname" name="fullname" placeholder="Full Name">
<input type="text" id="email" name="email" placeholder="E-Mail">
<input type="text" id="phone" name="phone" placeholder="Phone">
<input type="number" id="age" name="age" placeholder="Age">
<h4>Gender</h4>
<div class="row">
<div>
<input type="radio" name="gender" value="male" id="gender-male"/>
<label for="gender-male">Male</label>
</div>
<div>
<input type="radio" name="gender" value="female" id="gender-female"/>
<label for="gender-female">Female</label>
</div>
</div>
<div class="row">
<h4>Description</h4>
<div class="input-group">
<label for="terms">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipiscing elit, sed do eiusmod tempor. </label>
</div>
</div>
<input type="button" name="next" id="btnNext" class="next action-button" value="Next" />
</fieldset>
答案 0 :(得分：0)
使用您为同一元素附加的tow事件。请参阅波纹管事件是针对相同的按钮。
def iq_test(numbers)
new_array = numbers.split(" ").collect {|n| n.to_i}
x = new_array.select(&:even?)
y = new_array.select(&:odd?)
if x.count > y.count
new_array.split.each_with_index do |value, index|
"#{index + 1}".to_i if value % 3 != 0
end #end of block
elsif y.count > x.count #in order for this to have a condition, it must be an elsif
"#{index + 1}".to_i if value % 2 == 0
end #end of if statement
#end - remove this extra end
end #end of function
答案 1 :(得分：0)
<强>段
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
$(".next").click(function() {
//text inputs
if (!document.getElementById('fullname').value) {
alert('Full Name is required');
return false;
} else if (!document.getElementById('email').value) {
alert('Email is required');
return false;
} else if (!document.getElementById('phone').value) {
alert('Phone Number is required');
return false;
} else if (!document.getElementById('age').value) {
alert('Age is required');
return false;
}
//radio buttons
var genderSet = false;
var genderBtns = document.getElementsByName('gender');
//console.log(genderBtns);
for (var i = 0, btn; btn = genderBtns[i]; ++i) {
if (btn.checked) {
genderSet = true;
break;
}
}
if (!genderSet) {
alert('Gender is required');
return false
}
if (animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({
opacity: 0
}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50) + "%";
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({
'transform': 'scale(' + scale + ')'
});
next_fs.css({
'left': left,
'opacity': opacity
});
},
duration: 800,
complete: function() {
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".previous").click(function() {
if (animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
//de-activate current step on progressbar
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
//show the previous fieldset
previous_fs.show();
//hide the current fieldset with style
current_fs.animate({
opacity: 0
}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale previous_fs from 80% to 100%
scale = 0.8 + (1 - now) * 0.2;
//2. take current_fs to the right(50%) - from 0%
left = ((1 - now) * 50) + "%";
//3. increase opacity of previous_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({
'left': left
});
previous_fs.css({
'transform': 'scale(' + scale + ')',
'opacity': opacity
});
},
duration: 800,
complete: function() {
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".submit").click(function() {
return false;
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Step 1</h2>
<h3 class="fs-subtitle">Background Information</h3>
<input type="text" id="fullname" name="fullname" placeholder="Full Name">
<input type="text" id="email" name="email" placeholder="E-Mail">
<input type="text" id="phone" name="phone" placeholder="Phone">
<input type="number" id="age" name="age" placeholder="Age">
<h4>Gender</h4>
<div class="row">
<div>
<input type="radio" name="gender" value="male" id="gender-male" />
<label for="gender-male">Male</label>
</div>
<div>
<input type="radio" name="gender" value="female" id="gender-female" />
<label for="gender-female">Female</label>
</div>
</div>
<div class="row">
<h4>Description</h4>
<div class="input-group">
<label for="terms">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipiscing elit, sed do eiusmod tempor. </label>
</div>
</div>
<input type="button" name="next" id="btnNext" class="next action-button" value="Next" />
</fieldset>
删除您的事件监听器document.getElementById('btnNext').addEventListener('click',function)。每次点击下一个按钮，它都会向同一个按钮添加另一个点击事件。这就是你获得多重警报的原因。
答案 2 :(得分：0)
您定义了两个事件侦听器。第二个事件侦听器被添加到内存中的侦听器列表中。每次单击该按钮时，都会创建btnNext的新事件侦听器，从而导致每次按下按钮时都会调用事件侦听器。将您的代码更改为以下内容。
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
$(".next").click(function(){
//text inputs
if(!document.getElementById('fullname').value){
alert('Full Name is required');
return false;
}
else if(!document.getElementById('email').value){
alert('Email is required');
return false;
}
else if(!document.getElementById('phone').value){
alert('Phone Number is required');
return false;
}
else if(!document.getElementById('age').value){
alert('Age is required');
return false;
}
//radio buttons
var genderSet = false;
var genderBtns = document.getElementsByName('gender');
//console.log(genderBtns);
for(var i=0, btn; btn=genderBtns[i];++i){
if(btn.checked){
genderSet=true;
break;
}
}
if(!genderSet){
alert('Gender is required');
return false
}
if(animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50)+"%";
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'transform': 'scale('+scale+')'});
next_fs.css({'left': left, 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".previous").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
//de-activate current step on progressbar
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
//show the previous fieldset
previous_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale previous_fs from 80% to 100%
scale = 0.8 + (1 - now) * 0.2;
//2. take current_fs to the right(50%) - from 0%
left = ((1-now) * 50)+"%";
//3. increase opacity of previous_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'left': left});
previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".submit").click(function(){
return false;
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Step 1</h2>
<h3 class="fs-subtitle">Background Information</h3>
<input type="text" id="fullname" name="fullname" placeholder="Full Name">
<input type="text" id="email" name="email" placeholder="E-Mail">
<input type="text" id="phone" name="phone" placeholder="Phone">
<input type="number" id="age" name="age" placeholder="Age">
<h4>Gender</h4>
<div class="row">
<div>
<input type="radio" name="gender" value="male" id="gender-male"/>
<label for="gender-male">Male</label>
</div>
<div>
<input type="radio" name="gender" value="female" id="gender-female"/>
<label for="gender-female">Female</label>
</div>
</div>
<div class="row">
<h4>Description</h4>
<div class="input-group">
<label for="terms">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipiscing elit, sed do eiusmod tempor. </label>
</div>
</div>
<input type="button" name="next" id="btnNext" class="next action-button" value="Next" />
</fieldset>