將變量插入html代碼

我是新來的Javascript，我做了一堆搜索，但沒有發現似乎回答我的具體問題。我試圖找出如何實現一個變量轉換爲HTML ...這可能是更好的例子服務：將變量插入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">

來源

2012-06-20 Eric Wolf

你是否願意使用jQuery？ –

不會是更容易的參數添加到您的功能？

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-20 02:03:15

我會在HTML中做什麼？「字符串」來自哪裏（存儲在哪裏？）？ –

@EricWolf：'onclick =「nextImage（'images/52/week _'）」>'。當然，如果你是在同一個網站上爲幾個圖像序列做這個，每個序列都必須有自己的計數器。 –

HTML沒有變量的概念。您需要使用javascript存儲/操作變量。這並不是說你不能重構這個函數以用於更一般的意義上。考慮以下幾點：

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-20 01:59:37 tjscience

問題在於，並不是所有的圖像都存儲在「images/52 /」中，有些存儲在「images/365」或「images/other」中。我試圖避免在「nextImage（）」腳本中命名圖像位置。也許在頁面上的某個地方命名並傳遞它？ –

請參閱我的編輯我認爲它解決了您的所有問題。 – tjscience

這將是很高興知道downvote的原因... – tjscience

您可以通過路徑作爲參數，如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-20 02:07:32 bfavaretto

更新：使用'imageElement.getAttribute（'src'）'而不是'imageElement.src'。另外，我的「流行」鏈接出現問題，現在已經修復。 – bfavaretto

您可以使用正則表達式修改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-20 02:11:21 flowfree

這是一個好主意，但只適用於文件全都具有相同名稱模式的情況。 OP必須證實這一點。 –

將變量插入html代碼

回答

相關問題