Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Изменение url ссылки через счетчик (https://javascript.ru/forum/misc/38483-izmenenie-url-ssylki-cherez-schetchik.html)

OlgaMarius 03.06.2013 21:46

Изменение url ссылки через счетчик
 
Уважаемые эксперты Джаваскрипт! :)

Помогите решить техническую проблему. Делаю бесконечный скроллинг. Вкратце суть такая. Есть каталог статей. Нужно листать материалы до упора, без переключения страниц 1,2,3,4...23. Вместо этого будет одна страница. Контент подгружается при нажатии на кнопку "Еще" постранично.

Итак, контент на каждой странице обернут тегом span с классом lenta.
<span class="lenta">контент</span>

Внизу страницы есть пустой блок, в который будут подгружаться материалы:
<div id="lenta_podgruzka"></div>

И есть ссылка "Еще"
<a href="#" onclick="$('div#lenta_podgruzka').load('site/category-2-2 .lenta'); return false;">Еще</a>


Вот вся суть. Теперь о проблемах. Ссылки на страницы имеют вид:
site/category-1-2
site/category-2-2
site/category-3-2
site/category-4-2
И так далее.

Итак, представим, мы открыли категорию "цветы". прокрутили первые 10 материалов и нажали на ссылку "Еще". Эта ссылка имеет вид site/category-2-2. Таким образом загрузилась новая порция материалов. Мы продолжаем скроллить и снова дошли до конца страницы... а ссылка имеет тот же вид! Вместо - site/category-3-2 там стоит site/category-2-2

Как решить эту проблему? То есть, если подвести итог всему, при нажатии на ссылку, урл в ней должен изменяться на единичку. Пожалуйста, подскажите, как это реализовать.

ruslan_mart 03.06.2013 21:52

При каждом нажатии кнопки "ещё" обращайтесь к ф-ции и в ней прибавляйте число к переменной.

var myvar = 1;
function url()
{
   myvar++;
   history.pushState(0, 0, '/category-'+myvar+'-2');
}

Deff 03.06.2013 22:00

<a href="site/category-1-2" onclick="return transformUrl(this);">Далее</a>

<script type="text/javascript">
 function transformUrl(a){
  var href = a.href;
  var ar = href.split('-');
  var basic = ar[0];
  var Numb1 = +ar[1];
  var Numb2 = +ar[2];
  Numb1++;
  a.href = basic+'-'+Numb1+'-'+Numb2;
alert(a.href)
  return false; //в реальном скрипте строку удаляем
  return true;
 } 
</script>

OlgaMarius 03.06.2013 22:23

Спасибо за подсказки! Почти все получилось, но есть проблема...
Пытаюсь использовать вариант, который предложил Deff. Ссылка формируется правильно, как надо. Но мне ее нужно использовать тут: <a href="#" onclick="$('div#lenta_podgruzka').load('site/category-2-2 .lenta'); return false;">Еще</a>
Это возможно?

И пытаюсь, применить способ, который предложил Ruslan, но как начинающий джаваскриптер, не очень понимаю, как все это прикрутить.
Если можете помогите. Но спасибо большое за подсказки! Буду думать дальшее))

Deff 03.06.2013 22:46

<a href="site/category-1-2" onclick="return transformUrl(this);">Еще</a>

<script type="text/javascript">
 function transformUrl(a){
  var href = a.href;
  var ar = href.split('-');
  var basic = ar[0];
  var Numb1 = +ar[1];
  var Numb2 = +ar[2];
  Numb1++;
  a.href = basic+'-'+Numb1+'-'+Numb2;
  $('div#lenta_podgruzka').load(a.href+' .lenta');
  return false; //не удаляем
 } 
</script>

OlgaMarius 03.06.2013 22:54

Да вы волшебник! :) Спасибо, все заработало!


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