Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   выбор элемента по id из нескольких объектов одного класса (https://javascript.ru/forum/jquery/66140-vybor-ehlementa-po-id-iz-neskolkikh-obektov-odnogo-klassa.html)

kossr 28.11.2016 00:22

выбор элемента по id из нескольких объектов одного класса
 
Доброго времени суток.
Есть задача:
много объектов одного класса (магазин), но с уникальными id.
нужно по нажатию на объект отправлять ajax запрос (это работает) и изменять текст в объекте.
function addFav(){
	var $id = $(this);
	console.log('adding to favs id: '+ $id.attr('id'));
	$.ajax({
		type:"post",
		url: "/fav_add.php",
		data: "id="+$id.attr('id'),
		success: function(){
			$('.fav')
                .addClass('active')
                .attr('title','Добавить в избранное')
                .unbind('click')
                .bind('click', removeFav)
		.text('Добавить в избранное');
		}
    });
}

function removeFav(){
	var id = $(this);
	console.log('removing from favs id: '+ id.attr('id'));
	$.ajax({
		type:"post",
		url: "/fav_del.php",
		data: "id="+id.attr('id'),
		success: function(){
            $('.fav')
                 .removeClass('active')
                 .attr('title','Удалить из избранного')
                 .unbind('click')
                 .bind('click', addFav)
		 .text('Удалить из избранного');
		}
    });
}
$('span.fav').on('click', addFav());

понятно, что этот селектор выбирает все объекты класса, но мне нужно менять надпись в конкретно нажатом
Введенные в консоли селекторы $('span#'+9) , и $('.fav[id="9"]') работают, но я не знаю, как его реализовать в коде - код $('.fav[id="'+ $id.attr('id') +'"]') не работает.

итак, вопросы:
1. какой нужен селектор для выбора одного объекта (на который нажали)?
2. даже селектор, выбирающий все, не срабатывает на первое нажатие (ajax передает data: "id='не определен'")
Скажите пожалуйста, в каком направлении копать?
Спасибо.

Bond 28.11.2016 01:09

А $(this) что, не катит? Он как раз и выбирает то на что кликнули.
id не определен потому что передавать объект нужно а не строку как в строке 7 и 25
data: {id: $id.attr('id')},

И здесь финкцию без скобок прописать $('span.fav').on('click', addFav());

kossr 28.11.2016 12:30

Поставил {id: $id.attr('id')}, теперь реагирует со второго нажатия (т.е. вместо удаления добавляет, а вместо добавления удаляет), но это ладно, поставлю проверку класса;
А вот если сделать
...success:function(){
            $(this)...

то скрипт вообще перестает работать.
я туда уже чего только не подставлял, и собственно $id вместо $(this), и тупо $this...
Если вставить селектор $('.fav[id="9"]') то при клике на любой меняет именно с id 9, но ведь работает... а как получить эту 9 из $id, я не знаю.
Если попробовать в succsess вставить alert($id.attr('id')) напишет undefined, если alert($id), то object object...
в общем, уперся в это id ...

да, забыл добавить хтмл
Код:

<span id='9' class='fav active' title=''>Добавить в избранное</span>
UPD:
убрал скобки в бинде $('span.fav').on('click', addFav);
добавляет/удалеят нормально, а вот надпись меняет так же криво

kossr 28.11.2016 23:47

В общем, как-то так
var $sp = $(this).attr('id');
...
$('#'+$sp)

Dilettante_Pro 29.11.2016 11:11

Цитата:

Сообщение от kossr
В общем, как-то так
var $sp = $(this).attr('id');
...
$('#'+$sp)

Масло масленное... Можно просто this запомнить до ajax и пользоваться им, хоть и в success
var that = this;

...success:function(){
            $(that)...


Часовой пояс GMT +3, время: 05:43.