Очень простое использование jQuery: использование $ (this) или var

Question

Это мое первое использование jQuery. Я просто хочу быстрое решение для следующего:

Это очень просто; при нажатии кнопки div # a1.toolbotb отображается div # a1p. Когда нажата # a2.toolbotbut, показывается div # a2p. Когда нажата кнопка # b2.toolbotbut, отображается div # b2p и т. Д. Таким образом, индивидуальный запрос выглядит так:

$('#a1.toolbotbut').click(function() {
  $('#a1p.overlay').fadeIn('slow');
  });

и

$('#a2.toolbotbut').click(function() {
  $('#a2p.overlay').fadeIn('slow');
  });

Не могли бы вы сказать мне, как использовать $ (this) или var, чтобы выбрать идентификатор div выбранного элемента и вставить его в $ ('... p.overlay'), чтобы я мог использовать две строки кода для целая функция. Не беспокойтесь о том, чтобы скрыть или пометить как активный ... просто базовая техника, которая мне нужна здесь.

Большое спасибо.

Answer 1

Как это:

$('.toolbotbut').click(function() {
  var id = $(this).attr('id');
  var overlayId = '#' + id + 'p.overlay';
  $(overlayId).fadeIn('slow');
});

Answer 2

Переменная this относится к объекту, который вызывает функцию () в событии щелчка (т. Е. #a1.toolbotbut).Если вы ссылаетесь на this внутри функции, вы на самом деле ссылаетесь на #a1.toolbotbut.Если вы поместите this в $ () как $(this), то вы превратили #a1.toolbotbut в объект jQuery.

У объектов jQuery есть метод attr, который будет возвращать атрибут или свойствотак что вы можете сделать что-то вроде:

var div_id = $(this).attr(); // returns "a1"

Надеюсь, я понял, о чем вы спрашиваете, и что это помогает.Удачи.