Как сравнить идентификаторы, которые находятся внутри плагина?

Question

Я ищу решения для сравнения элементов id внутри плагина.Это код, который имеет проблему:

(function($, window, undefined) {
  $.fn.thePlugin = function() {
    return this.each(function() {
      const $el = $(this);
      console.log($el);
      if ($el == $('#bird')) {
        console.log($el + ' is a bird.');
        // $el == document.getElementById('bird')
        // $el == document.getElementById('bird').id didn't work.
      } else if ($el == $('#superman')) {
        console.log($el + ' is Superman');
      }
    })
  }
}(jQuery));

$('#bird').thePlugin();
$('#superman').thePlugin();

w.fn.init [div # bird]
w.fn.init [div # superman]

Очевидно, что console.logs, которые находятся внутри if statement, не запускаются.Запускается только 1 журнал, который находится за пределами if statement.

. Я протестировал 2 способа решения этой проблемы, используя селекторы jQuery и без селекторов jQuery, но все способы не работали.

Есть ли способы сравнить id внутри структуры плагина?

• Я не могу использовать getElementByClassName, потому что мой стиль DOM всегда начинается с idкак то так:

  #section {
    .container {
      .grid {
      }
    }
  }
  

Answer 1

Если вы просто хотите сравнить id элементов, вы можете использовать следующее, сравнивая только строковое значение id:

if ($el.id === 'bird') {
   console.log($el + ' is a bird.');
}

Причина, по которой ваш код не работаетчто вы пытаетесь сравнить два объекта, которые имеют разные ссылки в памяти.Пример:

const variableOne = {ключ: 1}

const variableTwo = {ключ: 1}

variableOne == variableTwo // Преобразуется в ложь

Если вам нужно сравнить эти два элемента, используя переменную $ el, вы можете использовать следующее:

if ($el.is($('#bird')) {
    console.log($el + ' is a bird.');
}

См. Следующую ссылку для is документации по функциям http://api.jquery.com/is/

Вы также можете найти больше информации о функции Object.is и о том, как сравнивать объекты в javascript здесь:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is