1

对于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 () {
...
};
4

4 回答 4

0

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

<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演示

于 2013-05-29T21:26:33.210 回答
0

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

<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();
 });
于 2013-05-29T21:30:55.030 回答
0

这确实不是最佳做法。

如果您（确切地）知道您将拥有什么样的结构，您可以执行以下操作：

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

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

于 2013-05-29T21:25:39.633 回答
-1

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

$('div[class*="spot"]').doSomething();
于 2013-05-29T21:22:49.247 回答