如何确定 $(this) 是否在点击事件的数组中答案

【问题标题】：How to determine if $(this) is in array on click event如何确定 $(this) 是否在点击事件的数组中
【发布时间】：2016-05-03 15:46:30
【问题描述】：

我在 4 个数组中有一组 id 值。每个数组都将被分配一个文本值，用于一个 h1 和一个我还没有输入的 p。现在我只是想让它在数组graphicDesign中的一个图像被点击时发出警报。我尝试使用 $.inArray

DEMO

var graphicDesign = [$('#design'), $('#DD'), $('#SElogo')];
var webDesign = [$('#bootstrap'), $('#farm'), $('#pong'), $('#SE'), $('#dung')];
var programming = [$('#SE'), $('#dung'), $('#sacar')];
var other = [$('#firm')];

function categories() {
  if ($.inArray(this, graphicDesign) > -1) {
    alert('hello');
  }
}

【问题讨论】：

你的问题是什么？
在您的演示代码中，this 将不是一个元素，因为您单独调用它。将console.log(this) 添加到categories() 并打开您的控制台（按F12）。你会明白我的意思。
如何让警报发挥作用。我画廊中的每个图像都有一个 ID，每个 ID 都在我的一个数组中，如果单击的图像的 ID 在 x 数组中，那么它应该做某件事。现在我只是试图通过使用警报来正确定位它
已编辑演示，我在错误的点击功能中有分类功能。将此更改为 event.target，仍然无法正常工作
graphicDesign 是一个 jquery 对象数组。 Jquery 选择器返回包含原始对象的数组，我不记得是什么。为了显示警报，只需用 if ($.inArray(event.target, graphicsDesign[0]) > -1) 替换您的代码，但这不是解决方案。您必须循环输入数组的所有元素并与第一个元素进行比较

标签： javascript jquery arrays

【解决方案1】：

您不应该将 DOM 对象存储在数组中并尝试将它们与 $.inArray 匹配。使用 ids 或其他属性会是更好的解决方案。

例如：

https://jsfiddle.net/1f9xd3t0/

var graphicDesign = ['design', 'DD', 'SElogo'];

function categories(id) {
  if ($.inArray(id, graphicDesign) > -1) {
    alert('hello');
  }
}  

categories('design');

【讨论】：

这是正确的解决方案，因为 $(this) 和 $('#...') 具有不同的引用，并且数组保留引用而不是它们的值
如果我需要检查多个 ID，而不仅仅是一个，该怎么办？
您可以使用数组相交，如本文所述：stackoverflow.com/questions/17805268/…。

【解决方案2】：

您需要将event 对象传递给categories()。

$('.portPic').click(function(e) {
  // ...
  categories(e);
});

function categories(e) {
  console.log(e.target);
  if ($.inArray(e.target, graphicDesign) > -1) {
    alert('hello');
  }
}

更新

也许在你的数组中使用id而不是jQuery对象。

var graphicDesign = ['design', 'DD', 'SElogo'];

然后在categories() 中使用e.target.id。

【讨论】：

【解决方案3】：

你可以使用typeof，这里是一个例子。

// Objects
typeof {a:1} === 'object';

// use Array.isArray or Object.prototype.toString.call
// to differentiate regular objects from arrays
typeof [1, 2, 4] === 'object';

【讨论】：

【解决方案4】：

Array.indexOf() 是一个做同样事情的本机函数。

graphicDesign.indexOf(this) > -1 将等同于您所写的内容。

在您的使用中，this 将引用全局对象，除非您在其他地方将此函数分配给一个对象并将其作为方法调用...重新调用它是在图形设计数组中吗？

下面是一个触发警报的用法示例：

var graphicDesign = [ {} ]

graphicDesign[0].categories = function() {
  if (graphicDesign.indexOf(this) > -1) {
    alert('the object this method was called on is inside the graphicDesign array')
  }
}

graphicDesign[0].categories()

目前还不清楚您要完成什么，但是（您提到了点击检测，但这里没有点击处理程序等）......我希望这会有所帮助吗？

【讨论】：

【解决方案5】：

这个 $.inArray 块正在工作，但是你把它们放在错误的地方，它总是返回 -1，所以你不能得到警报（'hello'）。请修正整体逻辑。

  if ($.inArray(this, graphicDesign) > -1) {
    alert('hello');   }

【讨论】：