Селекторы класса jQuery и $ (это)

Question

У меня есть плагин, который я пытаюсь вызвать, и использую атрибут из параметра, определенного в DOM. Например

<a href="somewhere.html" class="my_a">blah</a>

И у меня есть плагин "box", поэтому я хочу сделать

$(".my_a").box({

attribute1: "something",
attribute2: $(this).attr('href')
});

Так что одним из параметров, передаваемых в функцию box, является значение href из a класса, по которому был выполнен щелчок, однако использование $ (this), похоже, не работает.

Есть мысли?

Answer 1

Поскольку вы используете селектор имени класса, я бы рекомендовал кэшировать поиск элемента

var el = $(".my_a");
el.box({
   attribute1: "something",
   attribute2: el.attr('href')
});

Answer 2

this не в правильном контексте в этой точке для целевого элемента.

Вам нужно будет отдельно собрать информацию и передать ее плагину box либо изменить сам плагин.

$('.my_a').click(function( e ){

    var el = $(e.currentTarget);

    e.preventDefault();

    el.box({

        attribute1: 'something',
        attribute2: el.attr('href')

    });

});

Я предполагаю, что плагин box обрабатывает событие click, так что это не лучший пример, но это единственный способ получить атрибут элемента, который был фактически нажат.

Answer 3

Вам не нужно передавать атрибут ссылки на вашу функцию.

Как только вы попадете в функцию box, вы можете установить любые атрибуты, которые захотите.Например:

$.fn.box = function(attributes){
  // this now refers to a jQuery object that contains your link.  So use it here
  var href = this.attr('href');
  // so something with attributes and href
}

Я не знаю, что вы делаете внутри своей функции box, поэтому трудно комментировать дальше, но нет причин, по которым вы хотите передать атрибут того же самогоссылка, которую вы получаете с помощью jquery.

Answer 4

Вы можете вызвать метод box для каждого элемента с указанным классом.

$(".my_a").each(function() {
    $(this).box({
        attribute1: "something",
        attribute2: $(this).attr('href')
    });
});

Этот код перебирает все элементы с классом my_a и устанавливает их box.

Answer 5

$ (this) .attr ('href') предполагает, что вы находитесь в области событий для объекта .my_a, но вы не находитесь в этой области!

, для этого необходимо вызватьэто $ ('. my_a'). attr ('href')

Answer 6

Использование this не будет работать, я думаю в этом случае, потому что свойство this относится к объекту, который вы передаете box() (например, {attribute1: .., attribute2: ...}) ... поэтому вы должны сделать это: $(".my_a").attr('href')

EDIT:

$(".my_a").each(function(i, el){
    $(el).box({
        attribute1: "something",
        attribute2: $(el).attr("href")
    });
});