我遇到这个问题,每当用户单击“单击”几次,然后单击“发送”时,它就会显示消息的点击次数。
例如,如果对话框打开 5 次,则显示 5 次消息。 多次面对这个问题与绑定(bind)我该如何解决这个问题我不想学习快速修复。 但这是一种编写代码的好方法。
var test = {
init: function() {
$(".toggle-dialog").on("click", function() {
$(".picture-upload-dialog").toggle("fast", function() {
if ($(this).is(":visible")) {
test2.uploadPicture()
}
});
});
}
},
test2 = {
uploadPicture: function() {
var submitButton = $(".submit-picture");
submitButton.on("click", function() {
var fileVal = $("#fileToUpload").val();
if (fileVal !== "") {
var ext = fileVal.split("."),
arrayExtensions = ["jpg", "jpeg", "png", "bmp", "gif"];
console.log(fileVal)
ext = ext[ext.length - 1].toLowerCase();
if (arrayExtensions.lastIndexOf(ext) == -1) {
test3.errorMessage(001)
}
} else {
test3.errorMessage(002)
}
})
}
},
test3 = {
errorMessage: function(type) {
var error;
switch (type) {
case 001:
error = "< Ext error >"
break;
case 002:
error = "< No picture selected. >"
break;
default:
return "ERROR"
}
$(".error").append(error)
}
}
test.init();
.picture-upload-dialog {
display: none;
}
.toggle-dialog:hover {
cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="error">
</div>
<div class="public-text-input">
<div class="text-options">
<i class="toggle-dialog ct icon-picture" title="Upload...">Click</i>
<div class="picture-upload-dialog">
<div class="picture-upload-header">
Upload your picture
</div>
<div class="picture-upload-content">
<input type="file" name="fileToUpload" id="fileToUpload">
<button class="ct icon-picture submit-picture">SEND</button>
</div>
</div>
</div>
<div id="color-picker"></div>
</div>
最佳答案
这是因为每次 test2.uploadPicture()
可见时您都会调用它,这反过来又会在每次单击“click”时添加一个单击处理程序。尝试更新版本:
var test = {
init: function() {
test2.uploadPicture()
$(".toggle-dialog").on("click", function() {
$(".picture-upload-dialog").toggle("fast", function() {
});
});
}
},
test2 = {
uploadPicture: function() {
var submitButton = $(".submit-picture");
submitButton.on("click", function() {
var fileVal = $("#fileToUpload").val();
if (fileVal !== "") {
var ext = fileVal.split("."),
arrayExtensions = ["jpg", "jpeg", "png", "bmp", "gif"];
console.log(fileVal)
ext = ext[ext.length - 1].toLowerCase();
if (arrayExtensions.lastIndexOf(ext) == -1) {
test3.errorMessage(001)
}
} else {
test3.errorMessage(002)
}
})
}
},
test3 = {
errorMessage: function(type) {
var error;
switch (type) {
case 001:
error = "< Ext error >"
break;
case 002:
error = "< No picture selected. >"
break;
default:
return "ERROR"
}
$(".error").append(error)
}
}
test.init();
.picture-upload-dialog {
display: none;
}
.toggle-dialog:hover {
cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="error">
</div>
<div class="public-text-input">
<div class="text-options">
<i class="toggle-dialog ct icon-picture" title="Upload...">Click</i>
<div class="picture-upload-dialog">
<div class="picture-upload-header">
Upload your picture
</div>
<div class="picture-upload-content">
<input type="file" name="fileToUpload" id="fileToUpload">
<button class="ct icon-picture submit-picture">SEND</button>
</div>
</div>
</div>
<div id="color-picker"></div>
</div>
关于javascript - 发出调用 x 次按钮的函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42079483/