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

向函数添加参数会不会更容易？

 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" />
于 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 回答
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 回答