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

对于

div.spot1

和

div.spot2

我想要相同的行为-图像输入为空时隐藏删除按钮，图像上传时显示删除btn，图像上传时更改图像src，单击删除btn向服务器发送ajax请求等。当然我可以将spot1的js代码复制/粘贴到spot2，仅将类从

first

更改为

second

。但是假设我有4个这样的点，那么我的js文件中将有四个几乎相同的代码。我担心这不是最好的做法。我该怎么办

HTML:

---

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

---

这确实不是最佳做法

如果你知道你将拥有什么样的结构（确切地说），你可以这样做：

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

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

实例化它就像在其中传递元素一样简单。如果您使用的是jQuery，则可以使用

$.fn.extend（）

函数准确地执行此操作，如下所示：

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

从那里，您可以通过在包含您的点的jQuery选择器上调用

FileModule

来初始化模块（就是这样）

---

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

按照下面的方法更改标记如何

文件1
❌
文件2
❌

和JS

$（'.spot.browse'）。打开（'click'，函数（）{
$（this.parent（）.find（'.input'）。单击（）；
});
$（'.spot.input'）。on（'change'，function（）{
警报（'I'm input of type file of'+$（this）.parent（）.prop（'id'）+'和I'm changed'）；
});

---

这里是演示

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

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

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

---

如果您有多个相同类型的元素，它们代表相同类型的数据和/或功能，给它们取相同的类名可能是个好主意。我同意basilikum的观点，如果这些元素具有相同的行为，为什么div没有相同的类名。@Philip007我没有意识到，我已经发布了一条评论，因为我决定对此做出回答。但无论如何，诀窍是选择与图像具有相同父对象的

span

。jQuery为您提供了许多有用的函数，可以让您准确地执行这些操作，还提供了更多（）：

$（“.tn”）.first（）.parent（）.find（“.status”）

这没有抓住要点。他的选择器是全局绑定的，这意味着您的代码避开了这个问题。此外，class*=CSS过滤器的效率非常低，特别是当它必须循环遍历页面上的每个div时。我想检查标题范围是否为空。我怎样才能给他们相同的类名？假设title1为空，而title2为空。我应该如何对这个if语句进行编码？@ PHILMP07，您可以使用<代码> .eCh（）/code >：<代码> $（“.TITE”）。每个（函数（index）{if（$（this）.To（））＝=）“{/*做某事*/}} < /code >是否应该有一个空间在<代码> $$（‘SPOT？浏览））< /code >？它应该是一个后代选择器，对吗？@Philip007，没错。谢谢那是个打字错误。

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