Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   функция при клике (https://javascript.ru/forum/dom-window/59813-funkciya-pri-klike.html)

wordpost 28.11.2015 10:49

функция при клике
 
$('.mg-item').each(function() {
		$('.sct-clr').each(function() {
			var $SctClr = $(this);
		        $SctClr.on('click', 'li', function() {
		            var $SctClrLi = $(this),
		            	  $TakePrice = $SctClrLi.find('.take-price').html(),
		                  $TakeColor = $SctClrLi.find('.take-color').text(),
		            	  $TakeImg = $SctClrLi.find('.take-img').attr('src');

		            $SctClrLi.parents('.mg-item').find('.put-price').html($TakePrice);
		           $SctClrLi.parents('.mg-item').find('.put-color').text($TakeColor);
		            $SctClrLi.parents('.mg-item').find('.put-img').attr('src', $TakeImg);
		            $SctClrLi.siblings().removeClass('active');
		            $SctClrLi.addClass('active');
		        });
		});
    });

Народ, помогите пожалуйста сообразить функцию при клике
Есть блок .mg-item их много, в этом блоке есть еще один блок .sct-clr
В котором есть список для клика, при клике в основном блоке должно меняться цена,цвет и картинка из списка в блоке .sct-clr.
Вот как сообразить функцию из
var $SctClrLi = $(this),
 $TakePrice = $SctClrLi.find('.take-price').html(),
$TakeColor = $SctClrLi.find('.take-color').text(),
$TakeImg = $SctClrLi.find('.take-img').attr('src');
...

Mess4me 28.11.2015 13:01

wordpost,
может взять так ?
var $SctClrLi = $(this),
$TakePrice = $SctClrLi.find('.take-price')[0].html(),
$TakeColor = $SctClrLi.find('.take-color')[0].text(),
$TakeImg = $SctClrLi.find('.take-img')[0].attr('src');

а дальше уже делать с ними что надо.

Sigizmund2012 28.11.2015 17:41

Цитата:

Сообщение от Mess4me (Сообщение 397894)
wordpost,
может взять так ?
var $SctClrLi = $(this),
$TakePrice = $SctClrLi.find('.take-price')[0].html(),
$TakeColor = $SctClrLi.find('.take-color')[0].text(),
$TakeImg = $SctClrLi.find('.take-img')[0].attr('src');

а дальше уже делать с ними что надо.

Так не прокатит, $TakePrice = $SctClrLi.find('.take-price')[0] получит именно элемент, а не коллекцию jQuery, поэтому вызов метода html() выдаст ошибку 'is not a function'. То же самое и с остальными строками.

ruslan_mart 28.11.2015 21:11

Цитата:

Сообщение от Mess4me
attr('src')

Плохая практика. Лучше использовать prop.

//attr:
elem.getAttribute('src');

//prop:
elem.src;


Ну и раз уж обращаешься напрямую к элементам, то сразу использовать src/textContent/innerHTML, иначе выдаст ошибку, так как это уже сама нода, а не объект jQuery.

wordpost 29.11.2015 13:38

Хотелось что то типа такого:
$('.sct-clr').each(function() {
		var $SctClr = $(this);
	        $SctClr.on('click', 'li', function() {
	        	clickLi();
	});
	var clickLi = function (argument) {
	      var $SctClrLi = $(this),
	      	  $TakePrice = $SctClrLi.find('.take-price').html(),
	            $TakeColor = $SctClrLi.find('.take-color').text(),
	      	  $TakeImg = $SctClrLi.find('.take-img').attr('src');

	      $SctClrLi.parents('.mg-item').find('.put-price').html($TakePrice);
	     $SctClrLi.parents('.mg-item').find('.put-color').text($TakeColor);
	      $SctClrLi.parents('.mg-item').find('.put-img').attr('src', $TakeImg);
	      $SctClrLi.siblings().removeClass('active');
	      $SctClrLi.addClass('active');
	  });
	});


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