Предыдущая/следующая обработка строк Javascript?

Я пытаюсь сделать кнопку «предыдущая/следующая» для моего проекта. Вот урезанный код для него.

<html>
<head>
<script>
function prevP() {var element = document.getElementById("framePage");
             element = element.src;
             elementLen = element.length;
             elementLen = elementLen-6;
             elementChar = element.charAt(elementLen)
             elementChar = --elementChar
             newElement = element.replace(element.charAt(elementLen),elementChar);
             document.getElementById("framePage").src=(newElement);}

function nextP() {var element = document.getElementById("framePage");
             element = element.src;
             elementLen = element.length;
             elementLen = elementLen-6;
             alert(elementLen);
             elementChar = element.charAt(elementLen)
             elementChar = ++elementChar
             newElement = element.replace(element.charAt(elementLen),elementChar);
             document.getElementById("framePage").src=(newElement);}
</script>
</head>
<body>
<iframe src="www.websiteendingwithnumber1.com" id="framePage"></iframe>
</br>
<input type="button" onClick="prevP()" value="Previous">
<input type="button" onClick="nextP()" value="Next">
</body>
</html>

Мой проект создает примерно 40-120 html-страниц для отображения в iframe. Вы используете кнопку «Предыдущий/Далее», чтобы пролистать их. Каждая страница имеет динамическое имя с числом в конце. Например, /path/mountpoint0/page/page0.html, page1.html ... page5.html, и так далее, и тому подобное. Я пытаюсь сделать так, чтобы каждая из этих функций читала текущий URL-адрес iframe src, а затем устанавливала его на желаемый src в зависимости от нажатой кнопки. В основном, если вы находитесь на странице 5, он нарежет строку и установит src на страницу 4, если вы нажмете предыдущую, страницу 6, если вы нажмете следующую, и т. д. и т. д.

Предостережение! У меня также есть динамически сгенерированная точка монтирования (ramdisk) для динамически сгенерированных HTML-файлов iframe. Мой проект обнаружит, существует ли точка монтирования, и соответственно переименует ее в новую точку монтирования, IE, если существует mountpnt0, создаст и использует mountpnt1, и так далее, и так далее, пока не сможет. ТАК! Ошибка, которую я вижу, заключается в том, что она меняет номер точки монтирования, а не html-файла. Пример iframe.src = /tmp/prevram0/html/page0.html. Я нажимаю «Далее», выдает ошибку «Страница не найдена» и пытается перейти к /tmp/prevram1/html/page0.html. Я снова нажимаю «Далее», а затем переворачивается другой номер, /tmp/prevram1/html/page1.html. Желаемая операция будет следующей: iframe.src = /tmp/prevram0/html/page0.html. Я нажимаю «Далее», затем он устанавливает iframe.src в /tmp/prevram0/html/page1.html.

Извините, если это запутанно или не имеет большого смысла. Большая часть этого проекта была написана на python, и я хочу использовать HTML/JS для создания функции отчетности моего проекта. Я довольно новичок в python, достаточно хорошо разбираюсь в этом, но JS для меня совершенно новый, поэтому я прошу прощения за все мои (вероятные) головные боли, вызывающие ошибки нуба. Но мне бы очень хотелось получить некоторые указания и рекомендации о том, как лучше всего справиться с этой проблемой :)

Большое спасибо всем!

РЕДАКТИРОВАТЬ - Быстрое уточнение.

РЕДАКТИРОВАТЬ 2 - Я хочу поблагодарить всех за их большой вклад! Я очень, очень ценю это! Сейчас я занимаюсь некоторыми делами на работе, поэтому, когда у меня будет возможность еще немного поработать над своим проектом, я опробую ваши предложения и посмотрю, что получится :) Еще раз спасибо, ребята (и девочки?)!

РЕДАКТИРОВАТЬ 3 - window.onload = function () {pageNo = 0; baseUrl = document.getElementById('+q1+'baseurl'+q1+').innerHTML; }

window.onload = function(){
lPageNo = document.getElementById('+q1+'lPageNo'+q1+').innerHTML;
}

function prevP() {
if(pageNo > 1) { pageNo--; } 
var prevEl = document.getElementById('framePage'); 
prevEl.src = baseUrl + pageNo + '.html';
}

function nextP() {
if(pageNo<lPageNo) { pageNo++; }
var nextEl = document.getElementById('framePage');
nextEl.src = baseUrl + pageNo + '.html';
}

<span id="baseurl" style="display:none;">'+prevram+'/html/page</span>

<span id="lPageNo" style="display:none;">'+str(ptit)+'</span>

(prevram , q1 и ptit — это переменные Python в моем скрипте Python. prevram — это точка монтирования, а ptit — счетчик номеров страниц. q1 — одинарная кавычка.)


person 0xhughes    schedule 02.11.2012    source источник
comment
Эээ... не могли бы вы уточнить, когда определяется точка монтирования? Это делается с помощью javascript или на стороне сервера?   -  person user1600124    schedule 02.11.2012
comment
@user1600124 user1600124 - Этот скрипт фактически запускается на локальном компьютере. Это скрипт Python, который генерирует и монтирует точку монтирования. Другая часть скрипта генерирует веб-страницу и содержащийся в ней JS, который показывает вам результаты того, что сделал скрипт Python, поэтому скрипт Python определяет точку монтирования на вашем локальном компьютере и монтирует ее. - Изменить для уточнения.   -  person 0xhughes    schedule 02.11.2012
comment
извините, на выходных отсутствовал компьютер. Могу я спросить, почему вы использовали document.getElementById('+q1+'lPageNo'+q1')? Поскольку идентификатор диапазона - это просто lPageNo... is '+q1+' = ''?   -  person user1600124    schedule 04.11.2012
comment
@user1600124 user1600124 Извините, я копирую и вставляю из своего скрипта. Это назначение переменной Python, мне пришлось использовать переменные для одинарных кавычек, чтобы это не нарушило мое назначение переменной, поскольку оно заключено в одинарные кавычки.   -  person 0xhughes    schedule 04.11.2012
comment
@user1600124 user1600124 Понятно, обратитесь к вашему ответу ;) Спасибо!   -  person 0xhughes    schedule 05.11.2012


Ответы (2)


Предполагая, что ваша точка монтирования определяется сервером, я бы попробовал так: скрыть элемент на странице, содержащий базовую строку:

<span id="base" style="display:none;">/tmp/prevram0/html/page</span>

Затем привяжите обработчик к событию загрузки, чтобы получить эту информацию:

window.onload= function ()
{
    baseString = document.getElementById('base').innerHTML;
    document.getElementById('framePage').src = baseString + pageNo + '.html';

}

Где baseString — это переменная, определенная где-то в вашем коде, глобально доступная для этих функций. И pageNo — это еще одна переменная, предопределенная с начальным номером страницы.

Затем функция предыдущей страницы:

function PrevP()
{
    if(pageNo > 1)
    {
         pageNo--;
    }
    var el = document.getElementById('framePage');
    el.src = baseString + pageNo + '.html';
}

В функции «Следующая страница» вы просто добавляете страницу «Нет» и делаете то же самое:

function NextP()
{
    if(pageNo<lastPageNo)
    {
          pageNo++;
    }
    var el = document.getElementById('framePage');
    el.src = baseString + pageNo + '.html';
}
person user1600124    schedule 02.11.2012
comment
Спасибо за ваш вклад :) Этот код кажется мне довольно удобным, я примерю его на размер и сообщу о результатах! Большое спасибо еще раз. - person 0xhughes; 04.11.2012
comment
Попробовал ваш код, немного подправил его, ВОЗМОЖНО, облажался, редактирование 3 содержит функции и HTML, он не работает, я попытался добавить некоторые предупреждения JS в следующую и предыдущую функции, чтобы увидеть, не было ли что-то искажено, но оповещения даже не появлялись. Извините, что надоедаю вам! - person 0xhughes; 04.11.2012
comment
Я заработал, одинарная кавычка была перепутана в одном из моих объявлений переменных python, а одна из моих переменных java не соответствовала. Спасибо миллионному пользователю! - person 0xhughes; 05.11.2012

Метод JavaScript String .replace() ищет исходную строку в поисках для всего, что вы передаете в первом параметре. Если этот первый параметр является строкой, то он заменяет только первый ее экземпляр. Если этот первый параметр является регулярным выражением, вы можете выполнять более сложные сопоставления шаблонов и глобальные замены. Если второй параметр является функцией, вы можете выполнять еще более сложные замены: функция будет вызываться для каждого совпадения, что позволит вам обрабатывать каждое совпадение так, как вы считаете нужным, и возвращать значение замены, что идеально подходит для вашего случая, когда вы хотите увеличить или уменьшить число.

Попробуй это:

function prevP() {
    var element = document.getElementById("framePage");

    element.src = element.src.replace(/(\d+)(.html$)/,
                                  function(m,p1,p2){ return (+p1) -1 + p2; });
}
function nextP() {
    var element = document.getElementById("framePage");

    element.src = element.src.replace(/(\d+)(.html$)/,
                                  function(m,p1,p2){ return (+p1) +1 + p2; });
}

Регулярное выражение, которое я использовал, ищет цифры, за которыми следует .html в конце исходной строки, поэтому в вашем случае со строкой в ​​форме /tmp/prevram0/html/page0.html оно найдет только второе 0. Обратный вызов во втором параметре преобразует строку цифр в число с помощью унарного оператора плюс, вычитает или добавляет к нему 1, а затем возвращает бит .html обратно.

Обратите внимание, что это не выполняет никакой проверки диапазона, поэтому он будет продолжать попытки перейти к предыдущему, даже если он уже равен 0.

Демонстрация: http://jsfiddle.net/3VFvz/

Некоторые другие советы по вашему коду:

  • За исключением element, все ваши переменные являются глобальными, поскольку они не объявлены в операторе var.
  • .charAt() возвращает строку, поэтому нет смысла использовать оператор -- для результата.
  • Вы могли бы сказать elementLen = element.length - 6, вам не нужно делать часть -6 как отдельный оператор.
  • В более нормальном стиле JS первая строка тела функции размещается на строке после {, а закрывающая функция } помещается на отдельной строке - за исключением, возможно, очень коротких функций, которые находятся полностью на одной строке, как указано выше в моем ответе.
person nnnnnn    schedule 02.11.2012
comment
Я больше думал о том, чтобы иметь baseString = /tmp/prevram0/html/page. Затем var pageNo = любая страница, на которой вы находитесь... тогда вы просто устанавливаете src = baseString + pageNo.toString() + '.html'... - person user1600124; 02.11.2012
comment
@ user1600124 - Конечно, это тоже сработает и упростит добавление проверки диапазона для первой и последней страницы - опубликуйте это как ответ. (Обратите внимание, что вам не нужен .toString() в вашем примере.) - person nnnnnn; 02.11.2012
comment
Эй, спасибо за ваш ответ! Ваш код в основном имеет смысл для меня, за исключением частей функции (m, p1, p2). Являются ли m, p1 и p2 операторами? Я нигде не вижу их объявленными как переменные, поэтому я не уверен, что они означают! Извините, полный нуб JS! То, что вы сказали об замене, имеет смысл, я даже начал подозревать, что оно работает неправильно :) Еще раз спасибо за ваш вклад. - person 0xhughes; 04.11.2012
comment
m, p1 и p2 являются параметрами функции - их объявление находится в части function(m,p1,p2). Эта анонимная функция передается в качестве параметра методу replace() в качестве обратного вызова — она будет вызываться replace() для каждого совпадения, где m будет полным совпадением, а p1, p2 и т. д. может обрабатывать любые совпадающие значения. Любое значение, которое возвращает эта функция, становится значением замены для текущего совпадения. - person nnnnnn; 04.11.2012
comment
@nnnnnn Теперь это имеет для меня смысл, спасибо за разъяснение :) - person 0xhughes; 10.11.2012
comment
Мне никогда не приходило в голову, что второй параметр может быть функцией - это открывает новые возможности, спасибо, - person zer00ne; 17.01.2017