javascript - 前/次の Javascript 文字列処理?

Question

私のプロジェクトの前/次のボタンを作成しようとしています。これは、そのためのトリミングされたコードです。

<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>

私のプロジェクトでは、iframe 内に表示するために約 40 ～ 120 の html ページを作成します。[前へ/次へ] ボタンを使用してそれらをめくります。各ページは動的に名前が付けられ、最後に番号が付けられます。たとえば、/path/mountpoint0/page/page0.html、page1.html ... page5.html などです。私がやろうとしているのは、基本的に、これらの各関数に iframe src の現在の URL を読み取らせ、押したボタンに応じて目的の src に設定することです。基本的に、ページ5の場合、文字列をスライスし、前にヒットした場合はsrcをpage4に設定し、次の場合はpage6に設定します。

警告！また、動的に生成された iframe HTML ファイル用に動的に生成されたマウントポイント (ramdisk) もあります。私のプロジェクトは、マウントポイントが存在するかどうかを検出し、それに応じて新しいマウントポイントに名前を変更します。それで！私が見ているエラーは、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は私にとってまったく新しいものであるため、初心者の間違いを引き起こすすべての（おそらく）頭の痛みについてお詫び申し上げます。しかし、この問題を最善に処理する方法について、何らかの方向性とガイダンスが本当に欲しいです:)

どうもありがとうございました！

編集 - 簡単な説明。

EDIT 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 は一重引用符です。)

score 1 · Accepted Answer

JavaScript の String.replace()メソッドは、ソース文字列を検索して、最初のパラメーターに渡したものを探します。その最初のパラメーターが文字列の場合、その最初のインスタンスのみを置き換えます。その最初のパラメーターが正規表現の場合、より複雑なパターンマッチとグローバル置換を行うことができます。2 番目のパラメーターが関数の場合、さらに複雑な置換を行うことができます。関数は一致ごとに呼び出され、各一致を処理することができますが、適切と判断して置換値を返すことができます。これは、必要な場合に最適です。数値を増減します。

これを試して：

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を検索するため、フォーム内の文字列の場合、2番目の0. 2 番目のパラメーターのコールバックは、単項プラス演算子を使用して数字列を数値に変換し、1 を減算または加算してから、.htmlビットを元に戻します。

これは範囲チェックを行わないことに注意してください。そのため、すでに 0 になっている場合でも、前に移動しようとし続けます。

デモ: http://jsfiddle.net/3VFvz/

コードに関するその他のヒント:

以外elementのすべての変数は、varステートメントで宣言されていないため、グローバルです。
.charAt()--文字列を返すため、結果に演算子を使用しても意味がありません。
その部分を別のステートメントとしてelementLen = element.length - 6行う必要はないと言えます。-6
関数本体の最初の行をの後の行に{配置し、関数の終了}を独自の行に配置するのがより通常の JS スタイルです。答え。

score 0 · Accepted Answer

マウントポイントがサーバーによって決定されると仮定すると、次のようにしてみます: ベース文字列を含むページ内の要素を非表示にします:

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

次に、ハンドラーを load イベントにバインドして、その情報を取得します。

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';
}

次のページ関数は、pageNo を追加して同じことを行うだけです。

function NextP()
{
    if(pageNo<lastPageNo)
    {
          pageNo++;
    }
    var el = document.getElementById('framePage');
    el.src = baseString + pageNo + '.html';
}

javascript - 前/次の Javascript 文字列処理?

2 に答える 2

Related

Reference