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

Question

对于div.spot1和div.spot2我想要相同的行为-在图像输入为空时隐藏删除按钮，在图像上传时显示删除btn，在图像上传时更改图像src，单击删除btn将ajax请求发送到服务器等。当然，我可以将spot1的js代码复制/粘贴到spot2，仅将类从first更改为second 。 但是说我有四个这样的地方，那么我的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来初始化模块 （即模块 ）。

如果您希望更加动态，请考虑在其上绑定自定义事件，以允许代码的外部与之交互。 大胆的，这超出了您的问题范围。

Answer 2

如何按照以下方式更改标记

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

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

和JS

$('.spot .browse').on('click', function () {
    $(this).parent().find('.input').click();
 });

$('.spot .input').on('change', function () {
   alert('I\'m input of type file of ' + $(this).parent().prop('id') + ' and I\'m changed');
});

这是jsFiddle演示

Answer 3

如果您有多个具有相同类型的元素，表示相同类型的数据和/或功能，则它们应具有相同的类名。 您可以在元素中添加其他属性，以告诉您该类是哪个类，如下所示：

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

现在，您可以这样写：

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

Answer 4

由于您已经在使用jQuery，因此有一个选择器可以根据属性（属性包含）中的子字符串进行选择。

$('div[class*="spot"]').doSomething();