Question

我是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">

Answer 1

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

Answer 2

为您的函数添加参数会不会更容易？

 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调用中，例如：

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

Answer 3

您可以将路径作为参数传递，如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;
}

Answer 4

您可以使用正则表达式修改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在评论中所说，正则表达式模式必须与图像文件名匹配。

将变量插入到html代码中

4 个答案: