jquery - 文字列オブジェクトをスライスしてjQueryで新しい値を返す方法は?

Question

基本的に、jQuery にギャラリー スクリプトがあります。ユーザーがサムネイル画像をクリックすると、画像属性 src がメインのギャラリーの img 要素に転送されます。ただし、ユーザーが次/前のボタンをクリックして、フォルダー内のすべての画像を反復できるようにしたいと考えています。すべて img0.jpg、img1.jpg などの名前を付けました。「attr()」と「slice()」を介して現在の img src を取得し、img'0'、img'1' などの数値を変数でインクリメントできると考えていました。これが私のコードです。皆さんが理解できることを願っています！

$("#next").click(function () {
   var i = 0;
   var sliceImg = $("#gallerycover").attr("src").slice('0', String.length - 5);
   $("#gallerycover").attr("src", sliceImg + i++ +."jpg");
});

<div id="gallerycontainer">
  <img id="gallery" src="" />
</div>

<div id="thumbcontainer">
  <div id="box4"><img class="thumb" src="" /></div>
</div>

Answer 1

次のコードを置き換えてみてください。

var sliceImg = $("#gallerycover").attr("src").slice('0', String.length - 5);
$("#gallerycover").attr("src", sliceImg + i++ +."jpg");

これについて：

var src = $("#gallerycover").attr("src");
var idx = src.indexOf('img');
var sliceImg = src.slice(idx+3, src.length - 4);
$("#gallerycover").attr("src", (parseInt(sliceImg, 10) + 1) + ".jpg");

実際のデモを見る

Answer 2

正規表現を使用して画像ソース文字列を分割するか、次/前の関数が文字列を解析することなくチェックおよびインクリメントできる属性をサムネイルに追加することで、スライダーが個々のスライドをより適切に追跡できるようにすることができます (これは今後変更される可能性があります）。

Answer 3

var myInt = 0;
var myInt++;

var sliceImg = $("#gallerycover").attr("src").replace(/\d+/, myInt);

$("#gallerycover").attr("src", sliceImg);