Как определить, является ли $ (this) в массиве при событии click

Question

У меня есть набор значений id в 4 массивах. Каждому массиву будет присвоено текстовое значение для h1 и p, которые я еще не добавил. Прямо сейчас я просто пытаюсь заставить его предупредить, если щелкнуть одно из изображений в массиве graphicsDesign. Я попытался с помощью $ .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'); 
    } 
} 

Answer 1

Вам не следует хранить объекты DOM в массиве и пытаться сопоставить их с $ .inArray. Использование идентификаторов или другого атрибута было бы лучшим решением.

Например:

https://jsfiddle.net/1f9xd3t0/

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

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

categories('design'); 

Answer 2

Вы можете использовать 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'; 

Answer 3

Array.indexOf() является уроженцем функция, которая делает то же самое.

graphicDesign.indexOf(this) > -1 был бы эквивалентен тому, что вы написали.

В вашем использовании this будет ссылаться на глобальный объект, если вы в другом месте не назначаете эту функцию объекту и не называете его как метод ... Но затем вы пытаетесь определить, вызывая его внутри массива graphicDesign?

Вот пример использования, который будет стрелять предупреждение:

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

Неясно именно то, что вы пытаетесь достичь, однако (вы упоминаете об обнаружении щелчка, но нет ни одного обработчика нажмите здесь, и т.д. .)... Надеюсь, это поможет?

Answer 4

Вам необходимо передать event объект в categories().

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

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

UPDATE

И возможно использовать id «S, а не объекты JQuery в массивах.

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

Затем используйте e.target.id в categories().

Answer 5

Этот блок $ .inArray работает, но вы помещаете его в неправильное место, оно всегда возвращается -1, поэтому вы не можете получить предупреждение («привет»). Исправьте общую логику.

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