3

私はJavascriptが初めてで、たくさんの検索を行いましたが、特定の質問に答えるものは何も見つかりませんでした. 変数をhtmlに実装する方法を理解しようとしています...例を挙げたほうがよいかもしれません：

Javascript

var key = 1;

function nextImage()
{
    if(key == 52)
    {
        key = 0;
    }else{
        key++;
    }
    var image = "images/52/week_" + key + ".jpg";
    document.getElementById("mainImage").src= image;
}

HTML

<button type="button" onclick="nextImage()">Next</button>
<img id="mainImage" src="images/52/week_0.jpg" />

私がやろうとしているのは、「images/52/week_」を JavaScript から html に移動することです。これにより、関数を他の画像セットに再利用できます。基本的に、スクリプトで数値を反復処理し、それらの数値を HTML に送信したいと考えています。<img src="images/52/week_" + image + ".jpg">

4

4 に答える 4

3

HTML には変数の概念がありません。変数をjavascriptで保存/操作する必要があります。これは、関数をより一般的な意味で使用するためにリファクタリングできないということではありません。次の点を考慮してください。

JS

var key = 1;

function nextImage(id) {
    if(key == 52)
    {
        key = 0;
    }else{
        key++;
    }

    var image = document.getElementById(id);
    var src = image.getAttribute('data-src').replace('{0}', key);
    image.src = src;
};

HTML

<button type="button" onclick="nextImage('mainImage')">Next</button>
<img id="mainImage" data-src="images/52/week_{0}.jpg" src="images/52/week_0.jpg" />
<button type="button" onclick="nextImage('otherImage')">Next</button>
<img id="otherImage" data-src="images/356/week_{0}.jpg" src="images/356/week_0.jpg" />
于 2012-06-20T01:59:37.763 に答える
1

正規表現を使用してsrcプロパティを変更できます。

function nextImage() {
    var img = document.getElementById("mainImage");
    var s = img.src.match(/^(.+_)(\d+)(\.jpg)$/);
    var key = s[2];

    if (key == 52) {
      key = 0;
    } else {
      key++;
    }

    img.src = s[1] + key + s[3];
}

注： FelixKlingがコメントで述べたように、正規表現パターンは画像のファイル名と一致する必要があります。

于 2012-06-20T02:11:21.403 に答える
1

関数にパラメーターを追加するのは簡単ではないでしょうか?

 var key = 1;

 function nextImage(string,id)
 {
     if(key == 52)
     {
        key = 0;
     }else{
        key++;
     }
     var image = string + key + ".jpg";
     document.getElementById(id).src= image;
 }

更新 その質問は自分で答えます! 上記のコードを使用すると、JavaScript 呼び出しに 2 つのパラメーターを追加するだけで済みます。次に例を示します。

 <button type="button" onclick="nextImage('string','mainImage')">Next</button>
 <img id="mainImage" src="images/52/week_0.jpg" />
于 2012-06-20T02:03:15.103 に答える
1

EH_warch が言ったように、パスをパラメーターとして渡すか、次の<img>ようにそれ自体から取得できます。

var key = 1;
function nextImage()
{
    if(key == 52)
    {
        key = 0;
    } else {
        key++;
    }
    var imageElement = document.getElementById("mainImage");
    var path = imageElement.getAttribute('src').split('/');
    path.pop();
    path = path.join('/');
    var image = path + '/' + key + ".jpg";
    imageElement.src= image;
}
于 2012-06-20T02:07:32.733 に答える