Изменение 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 Как решить эту проблему? То есть, если подвести итог всему, при нажатии на ссылку, урл в ней должен изменяться на единичку. Пожалуйста, подскажите, как это реализовать. |
При каждом нажатии кнопки "ещё" обращайтесь к ф-ции и в ней прибавляйте число к переменной.
var myvar = 1; function url() { myvar++; history.pushState(0, 0, '/category-'+myvar+'-2'); } |
<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> |
Спасибо за подсказки! Почти все получилось, но есть проблема...
Пытаюсь использовать вариант, который предложил Deff. Ссылка формируется правильно, как надо. Но мне ее нужно использовать тут: <a href="#" onclick="$('div#lenta_podgruzka').load('site/category-2-2 .lenta'); return false;">Еще</a> Это возможно? И пытаюсь, применить способ, который предложил Ruslan, но как начинающий джаваскриптер, не очень понимаю, как все это прикрутить. Если можете помогите. Но спасибо большое за подсказки! Буду думать дальшее)) |
<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> |
Да вы волшебник! :) Спасибо, все заработало!
|
Часовой пояс GMT +3, время: 21:08. |