Показать сообщение отдельно
  #1 (permalink)  
Старый 05.02.2015, 10:57
Новичок на форуме
Отправить личное сообщение для pavelkild Посмотреть профиль Найти все сообщения от pavelkild
 
Регистрация: 05.02.2015
Сообщений: 2

При передаче значения переменной в атрибут появляется NaN
Впервые пришлось писать на форуме, не найдя ответа у всезнающих поисковиков. Может формулирую не верно, а может ещё что. Но, надеюсь на помощь.

История следующая: есть картинки, сгруппированные по 2-3, формирует одинаковый атрибут "rel". Организовал простейшую листалку внутри группы. Идея такая: при нажатии на следующий-предыдущий находится "rel" последнего показанного элемента, записывается в rel стрелок крутилки как "rel элемента | индекс элемента в группе".

При следующем вызове листалки всё повторяется. И всё отлично работало на сайтике с jQuery, но вчера зашёл на него после большого перерыва - и ужаснулся - крутилка работает только раз, потом в "rel" записывает "NaN".

Вот HTML картинок и листалки
<!-- Дивы с картинками -->
<div class = "responsesOutContainer">
   <div class = "responsesImgContainer" style ="">
      <div class = "mainRespPic" rel = "a601" style ="background: url('http://site.ru/images/responses/result624_1.jpg')"></div>
      <div class = "minRespPic" rel = "a601" style ="background: url('http://site.ru/images/responses/result624_2.jpg')"></div>
   </div>
   <div class = "responseTextContainer">
	<p>текст-текст</p>
   </div>
</div>

<div class = "responsesOutContainer">
   <div class = "responsesImgContainer" style ="">
      <div class = "mainRespPic" rel = "a602" style ="background: url('http://site.ru/images/responses/result625_1.jpg')"></div>
      <div class = "minRespPic" rel = "a602" style ="background: url('http://site.ru/images/responses/result625_2.jpg')"></div>
   </div>
   <div class = "responseTextContainer">
	<p>текст-текст</p>
   </div>
</div>

<div class = "responsesOutContainer">
   <div class = "responsesImgContainer" style ="">
      <div class = "mainRespPic" rel = "a603" style ="background: url('http://site.ru/images/responses/result628_1.jpg')"></div>
      <div class = "minRespPic" rel = "a603" style ="background: url('http://site.ru/images/responses/result628_2.jpg')"></div>
   </div>
   <div class = "responseTextContainer">
	<p>текст-текст</p>
   </div>
</div>

<!-- Вывод в листалку -->

<div id = 'showBigPhoto' style = "display: none;">
	<div class = 'switchPics leftArrow'></div>
	<div class = 'switchPics rightArrow'></div>
	<img src = 'http://site.ru/images/close_pic.png' class = 'closePic'>
	<img src = "" id = "showBigPhotoImg" />
</div>


И javascript, который работал

$(".minRespPic").click(function(){
	showPics($(this));
});
		
$(".mainRespPic").click(function(){
	showPics($(this));
});

function showPics($that) {
	var $set = $that.attr("rel"), // Наша группа
	$image = $that.css("background"),
	$aparts = $image.split("url("), // выдёргиваем картинку из background: url('')
	$parts,
	$index = $that.index("[rel = "+$set+"]"), 
	$next = ($index + 1) >= $("[rel = "+$set+"]").length ? 0 : $index + 1,
	$prev = $index <= 0 ? $("[rel = "+$set+"]").length-1 : $index - 1,
	mrgTop = 0, mrgLeft = 0, $pPrev = "", $pNext = "";
			
	$parts = $aparts[1].split(") ");
	$image = $parts[0]; // здесь картинка, всё ок

	$pPrev = ""+$set+"|"+$prev+""; // То, что и должно быть в rel, к примеру "a621|0" или "a621|1"
	$pNext = ""+$set+"|"+$next+"";
			
	console.log('prev = ',$pPrev,' next = ',$pNext, 'types = ',typeof($pPrev),typeof($pNext)); // проверяем, выводит всё верно

			/****** всё эпичное где-то здесь ******/
	$("#showBigPhoto .leftArrow").attr("rel", $pPrev); // При вызове со стрелки выводит NaN
	$("#showBigPhoto .rightArrow").attr("rel", $pNext); // При вызове со стрелки выводит NaN
			/****** всё, уже не работает ******/			

	$("#showBigPhotoImg").attr("src", $image);
	$("#showBigPhoto").fadeIn();
/*Просто косметика*/
	mrgTop = -1/2*$("#showBigPhotoImg").height();
	mrgLeft = -1/2*$("#showBigPhotoImg").width();
	$("#showBigPhotoImg").css("marginLeft", mrgLeft).css("marginTop", mrgTop);
}
		
$(".switchPics").click(function(){ // обработка нажатия кнопок листалки
	var $that = $(this),
		$slide = $that.attr("rel"),
		$attrs = $slide.split("|"), // attrs[0] - группа, attrs[1] - индекс
		$pointer = $("[rel = "+$attrs[0]+"]").eq($attrs[1]); // селектор
				
	console.log($attrs, $slide); // всё ок, показывает что надо
	showPics($pointer);
});


Очень нужна ваша помощь!
Ответить с цитированием