javascript - 发出调用 x 次按钮的函数

Question

我遇到这个问题，每当用户单击“单击”几次，然后单击“发送”时，它就会显示消息的点击次数。

例如，如果对话框打开 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>

Answer 1

这是因为每次 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>