Question

对于div.spot1和div.spot2我想要相同的行为 - 当图像输入为空时隐藏删除按钮，上传图像时显示删除btn，上传图像时更改图像src，单击删除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来初始化你的模块（就是这样）。

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

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();

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

4 个答案: