3

私はjQueryでスクリプトを書き込もうとしています。このスクリプトは、最初に画像タグ（ID "#image"）のsrcを取得します。

次に、画像パスの最初の部分（ "images / big /"）と画像拡張子（ ".jpg"）を取り除きます。これにより、画像名だけが残ります。これは単なる数字（1から7の範囲）です。

次に、その数を1ずつ増やします。

次に、画像パスと画像拡張子（最初に削除されたもの）を適切な場所に戻します。次に、この新しいパスをimgタグ（ID "#image"）に割り当てます

基本的に、スクリプトは画像の名前である番号をインクリメントすることを目的としています。

これは私が何とか書いたコードです：

var imagePath = ( $("#image").prop("src") );
    var imagePath = imagePath.replace('images/big/', '');
    var imagePath = imagePath.replace('.jpg', '');
    var imagePath = imagePath++;
    var imagePath = "images/big/"+imagePath+".jpg";
    $("#image").attr("src", imagePath);

残念ながら、それは機能しません。「NaN」の値を返すだけのようです。あなたが与えることができるどんな助けでも大いに感謝されるでしょう。

4

3 に答える 3

4

実際の問題は、数値をインクリメントするときに新しい変数を作成していることです。この行は間違っています:

var imagePath = imagePath++;

これはうまくいきます：

var imagePath = ( $("#image").prop("src") );
imagePath = imagePath.replace('images/big/', '');
imagePath = imagePath.replace('.jpg', '');
imagePath++;
imagePath = "images/big/"+imagePath+".jpg";
$("#image").attr("src", imagePath);

デモ

于 2012-08-02T08:49:37.740 に答える
1

1 つの数値を置き換えるにはコードが多すぎます。

$("#image").attr("src", $("#image").attr("src").replace(/\d/, function(s) {
    return +s+1;
}));

フィドル

または、より堅牢なバージョン (数字の後に続くことを確認し、.jpg1 桁以上の数字を受け入れる場合があります):

$("#image").attr("src", $("#image").attr("src").replace(/(\d+)\.jpg/, function(s, m) {
    return (parseInt(m, 10)+1) + '.jpg';
}));

フィドル

parseInt()指定された基数/基数で文字列を整数に解析します --10小数に対応します。0これは、たとえばで始まる場合、JS エンジンが数値が 8 進数であると想定しないようにするためです。ええと、常に小数を使用するときは、parseInt(myNumber, 10)それが 10 進整数として解析されることを確認してください。

1 つの.attr引数が渡されると指定された HTML 属性が取得され、2 つの引数が渡されると指定された属性が設定されます。基本的に、メソッドを適用した後src、同じ属性を設定しています。srcreplace

string.replaceメソッドは 2 つの引数を取ります。この場合、正規表現 ( 正規表現 ) を使用して数字文字(\dは を表す文字クラス[0-9]) を照合し、その後にリテラル.jpg文字列を続けて、1 ずつインクリメントされた一致した数値に置き換えます。

メソッドの 2 番目のパラメーターの関数オブジェクトは、一致全体 ( ) とそれに続く N 個のキャプチャ グループ ( = = 1 つ以上の数字文字)replaceを引数として取ります。キャプチャー グループは 1 つしかないので、関数に 2 つのパラメーターを指定して、キャプチャー グループを使用し、関数オブジェクト内でそれをインクリメントし、インクリメントされた数値 + を返して元のソースのを置き換えることができます。sm\d+.jpgnumber.jpg

そして、あなたのコードが機能していなかった理由として、私の唯一の推測は、文字列から数字以外のすべての文字を削除していないということです。したがって、++インクリメント演算子が型キャストを強制しようとするとNaN、指定された文字列が失敗するため整数として解析されます。私の置換メソッドでは、文字列から数値のみを取得し、文字列の残りの部分とは関係なく、それをインクリメントします。

編集：

私はあなたのコードの主な問題を発見し、画像の完全$("#image").prop("src")な URL を取得します。そのため、上記の段落が示すように、数字以外のすべての文字を削除しておらず、整数として評価できませんでした。これを に置き換えると、元のコードも同様に機能する可能性があります。.prop.attr

ポストインクリメント演算子を使用した後に変数をそれ自体に割り当てるべきではありませんが++、同じスコープで同じ変数名を複数回宣言することは悪い習慣と見なされます (ほとんどの JS インタープリターは再宣言を無視しますが、それはずさんなコーディングです)。

したがって、コードの別の修正バージョン:

var imagePath = $("#image").attr("src"); //use .attr as .prop returns full URL
imagePath = imagePath.replace('images/big/', '').replace('.jpg', '');
imagePath++;
imagePath = "images/big/"+imagePath+".jpg";
$("#image").attr("src", imagePath);
于 2012-08-02T09:09:02.617 に答える
0

文字列を数値に変換してからインクリメントするには、 javascript のparseInt()を使用する必要があります。

于 2012-08-02T08:51:14.520 に答える