javascript - 相同的行为适用于不同的元素

Question

对于 div.spot1 和 div.spot2 我想要相同的行为 - 当图像输入为空时隐藏删除按钮，上传图像时显示删除 btn，更改图像src当图片上传时，点击delete btn向服务器发送ajax请求等。当然我可以将spot1的js代码复制/粘贴到spot2，只需将类从first更改为second。但是假设我有 4 个这样的点，那么我的 js 文件中将有四个几乎相同的代码。我担心这不是最佳做法。我该怎么办？

HTML:

    <form class='upload' action="" method="POST" enctype="multipart/form-data">
        <div class="spot1">
            <span class='filename first'>FILE 1</span>
            <button type='button' class='delete first'>&#x274C</button>
            <input type="file" name="image" class="input first" accept="image/*">
            <input type="button" value="+" class="browse first"/> 
            <a href="{{ourl}}" class="fancybox" title="{{title}}"><img class="tn first" src="{{turl}}"></a>
            <span class="status first"></span>
        </div>

        <div class="spot2">
            <span class='filename second'>FILE 1</span>
            <button type='button' class='delete second'>&#x274C</button>
            <input type="file" name="image" class="input second" accept="image/*">
            <input class="browse second" type="button" value="+"/> 
            <a href="{{ourl}}" class="fancybox" title="{{title}}"><img class="tn second" src="{{turl}}"></a>
            <span class="status second"></span>
        </div>
    </form>

部分JS(仅用于举例):

if ( $('.tn.first').attr('src') == "") {
    ...
}

$('.browse.first').on("click", function () {
    $('.input.first').click();
 });

$('.input.first').on('change', function () {
...
};

Answer 1

这确实不是最佳实践。

如果你(确切地)知道你将拥有什么样的结构，你可以这样做:

var FileModule = function(elem) {
    // Throw your events here
}

实例化它就像在其中传递元素一样简单。如果您使用的是 jQuery，则可以使用 $.fn.extend() 函数来完成此操作，如下所示:

$.fn.FileModule = function() {
  return this.each(function() {
   // `this` is your element
   $(this).find(".input.first").on("change", function() { ... });
  });
};

从那里，您可以通过在包含您的点的 jQuery 选择器上调用 FileModule 来初始化您的模块(这就是它的本质)。

如果您想要更加动态，请考虑在其上绑定(bind)自定义事件，以便允许代码的外部部分与其交互。这超出了你的问题范围，无论如何。