Форум

wreder · #1 (**permalink**) 23.09.2013, 15:01

Здравствуйте! Есть галерея, страницы которой прокручиваются двумя кнопками "next" и "back". И есть счетчик прокрутки страниц - он показывает текущий номер страницы.

И никак не могу сообразить как блокировать кнопки прокруток если страницы закончились. Пытаюсь привязаться к значению счетчика, точнее к тому что он показывает, дескать:
- номер первой стр. = блокировка кнопки "back"
- номер последней стр. = блокировка кнопки "next"...

<script>
$('#counter_body').html("<span id='counter'>1</span><span>/3</span>"); /*это представляет из себя сам счетчик, единица меняется в зависимости от действий кнопок*/

	  $('#next').click(function(event){ /*кнопок вперед*/
		 $('#line').animate({  /*меняет положение страниц галереи*/		 
		    'margin-left':'-=300px'  
		 }, 400);
		$('#counter').html(+$('#counter').html()-1); /*меняет номер страницы*/
	  });


	  $('#back').click(function(event){ /*кнопок назад*/
		 $('#line').animate({		 
		    'margin-left':'+=300px'  
		 }, 400);
		$('#counter').html(+$('#counter').html()-1);


        /*пытаюсь привязаться к счетчику чем-то типа*/
           
            var resultHtml = $('#counter').html(+$('#counter').html()+1);
            if(resultHtml !="1"){	  	  
	          $('#back').attr("disabled","disabled");
                  }
		    else {
		   $('#back').removeAttr("disabled");				 
		  };              
	   });
</script>
<body>
<div id="counter_body"></div> //тело счетчика 
</body>

Последний код - это только набросок идеи, чего хочется сделать... т.е. пока коряво....

Помогите пожалуйста советом..... как причесать ту корявость? Перерыл кучу тем... ниче не вдохновило! Заранее благодарен!

P.S. Могу довольствоваться ссылкой на аналогичное событие... сами мы не гордые...

Tek · #2 (**permalink**) 23.09.2013, 15:38

Не работает т.к. вы не вызываете код

/*пытаюсь привязаться к счетчику чем-то типа*/
           
            var resultHtml = $('#counter').html(+$('#counter').html()+1);
            if(resultHtml !="1"){	  	  
	          $('#back').attr("disabled","disabled");
                  }
		    else {
		   $('#back').removeAttr("disabled");				 
		  };              
	   });

при клике на #back #next. Поэтому этот код отрабатывает только при загрузке странице и посуте ни на что не влияет. Оформите его в функцию и вызвоните на клик по кнопкам #back #next

wreder · #3 (**permalink**) 23.09.2013, 16:08

Tek, да, наверное сразу не видно..... но этот код в самом деле висит на клике по '#back'....просто я для наглядности отделил его от основного кода.... и видимо зря.... my bad...

т.е. код при клике и должен вызываться или все таки я что то не так оформил???

аааа.... когда оформил его в отдельную функцию (отдельно от animate) то все заработало.....

да, Спасибо! я то думал что сам код корявый....

wreder · #4 (**permalink**) 23.09.2013, 16:29

Tek,
ан нет!....действительно сам код корявый....в отдельной функции он почему-то меняет значение счетчика, а должен зависеть от него....ммм

$('#back').click(function(event){
		  var resultHtml = $('#counter').html(+$('#counter').html()+1);
		   if(resultHtml !="1"){	  	  
	       $('#back').attr("disabled","disabled");
		   } else {			   
				  $('#back').removeAttr("disabled");				 
				  }		  
	  });

если же первый вариант:

$('#back').click(function(event){
		 $('#line').animate({		 
		    'margin-left':'+=300px'  
		 }, 400);
		$('#counter').html(+$('#counter').html()-1);	  
		  var resultHtml = $('#counter').html(+$('#counter').html()+1);
		   if(resultHtml !="1"){	  	  
	       $('#back').attr("disabled","disabled");
		   } else {			   
				  $('#back').removeAttr("disabled");				 
				  }		  
	  });

то вообще тишина...

Tek · #5 (**permalink**) 23.09.2013, 16:44

Поменяй на

.attr("disabled",false)

.attr("disabled",true)

wreder · #6 (**permalink**) 23.09.2013, 16:59

Tek,

$('#back').click(function(event){
         $('#line').animate({
            'margin-left':'+=300px' 
         }, 400);
        $('#counter').html(+$('#counter').html()-1);
          var resultHtml = $('#counter').html(+$('#counter').html()+1);
           if(resultHtml !="1"){  
               $('#back').attr("disabled",false);
           } else { 
                  $('#back').attr("disabled",true);                
                 } 
      });

так? но что-то не особо с разницей....

Tek · #7 (**permalink**) 23.09.2013, 17:30

выведите алертом что находиться в resultHtml

wreder · #8 (**permalink**) 24.09.2013, 13:44

Tek, что-то бился я бился... и с алертом.... и так ничего от счетчика не получил..... Но сама задача отлично решилась с помощью var position

$('#back').click(function(event){
	  if (!loadingFlag){ /*защита от повторных нажатий*/
		 loadingFlag = true; /*выставляем блокировку click*/			  
		 $('#line').animate({		 
		    'margin-left':'+=300px'  
		 }, 400, function(){
			loadingFlag = false;  /* снимаем блокировку click */			 
		 });
		$('#counter').html(+$('#counter').html()-1);
		
		 var position = $('#line').css('margin-left');
		   if(position == '-300px'){		  
	       $('#back').attr("disabled",true);
		   } else {			       		   
				  $('#back').attr("disabled", false);				 				 
				  }					  
	     }		
	  return false;	
	  });

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

Форум

Справочник

Discord чат

Курсы javascript