在HTML中多次使用相同的變數

我對此進行了研究，在 HTML 檔案中多次使用在 JavaScript 中宣告的變數似乎很復雜，或者至少不簡單。

例如，我有多個（數百個）帶有 IMG 陳述句的 div 參考不同的 JPG 檔案。我想為每個 div 上相同的檔案提供路徑，并且我希望能夠在變數中宣告路徑文本并在每一行上使用它。這將使我能夠通過更改變數來更改路徑。我將多次使用它的事實意味著“id =”將不起作用，因為它只能使用一次。

遺憾的是，沒有一種簡單的方法可以做到這一點，因為我相信它會非常有用。在 DIV 中使用 IMG 的示例會很有幫助。

例子：

<div class="column">
<img src="SomePathtoFile/images/1.jpg" class="myimages"      
  onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>

我希望“SomePathtoFile”成為這個和所有以下 div 中使用的變數。

uj5u.com熱心網友回復：

試試這個！

var imgVariable = "https://i.ibb.co/8BQcPn4/1.png"
const nodeList = document.querySelectorAll(".column img");
for (let i = 0; i < nodeList.length; i  ) {
    nodeList[i].src = imgVariable;
}

<div class="column">
    <img src="1.png" alt="first" class="myimages" onclick="openModal();currentSlide(1)" class="hover-shadow cursor" width="50px">
    <img src="2.png" alt="second" class="myimages" onclick="openModal();currentSlide(1)" class="hover-shadow cursor" width="50px">
    <img src="3.png" alt="third" class="myimages" onclick="openModal();currentSlide(1)" class="hover-shadow cursor" width="50px">
</div>

謝謝和最好的問候！

uj5u.com熱心網友回復：

我不是 100% 了解您要實作的目標，但從表面上看，它就像是資料屬性的作業

您可以使用任何您喜歡的名稱創建它們：data-link、data-image、data-whatever，然后使用 JS 獲取/設定它們。

<span class="foo" data-info="nice">

// Get
span.dataset.info

// Set
span.dataset.info = "sweet";

我會嘗試在生成 div 及其內容/影像的同時動態呈現每個 div 上的屬性值，這應該給你一個清晰的參考。

希望它有所幫助，并且我已經理解了您的問題！

uj5u.com熱心網友回復：

我猜你指的是一個叫做 的東西scoped variable，它比資料屬性更適用于 js，讓我們scoped variable先看看這個例子（運行它）

let arr = 'abcdef'.split('')
arr.forEach(x => createButton(x))


function createButton(x) {
  let n = document.createElement('button')
  n.innerHTML = x
  n.addEventListener('click', () => alert(x))
  document.body.append(n)
}

和資料屬性示例

let arr = 'abcdef'.split('')
arr.forEach(x => createButton(x))


function createButton(x) {
  let n = document.createElement('button')
  n.innerHTML = x
  n.dataX=x
  n.addEventListener('click', e => alert(e.target.dataX))
  document.body.append(n)
}

div/img 與按鈕沒有什么不同

let arr = 'abcdef'.split('')
arr.forEach(x => createButton(x))


function createButton(x) {
  let d = document.createElement('div')
  let n = document.createElement('img')
  n.alt = x
  n.addEventListener('click', () => alert(x))
  d.append(n)
  document.body.append(d)
}

uj5u.com熱心網友回復：

我發現最接近的是使用 js 渲染 html。使用美元和花括號括起來你的 var。

<div id="fileList"></div>
<div id="more"></div>

<script type="text/javascript">

    // local computer path same as html file
    var myPath = "./photos";
    var container = document.getElementById('fileList');
    var div = document.createElement('div');    
    var image = `
        <img src="${myPath}/frog.jpg" 
      onclick="openModal();currentSlide(1)" >
    `;  
    div.innerHTML = image;
    container.appendChild(div); 

    var otherPath = "https://images.freeimages.com";
    var container = document.getElementById('more');
    var div = document.createElement('div');    
    var image2 = `
        <img src="${otherPath}/images/large-previews/f41/white-tiger-1362375.jpg" 
      onclick="openModal();currentSlide(1)" >
    `;  
    div.innerHTML = image2;
    container.appendChild(div);     

</script>

標籤：javascript html 变量

上一篇：有沒有辦法在python中分別獲取變數中的字串和整數？

下一篇：如何從powershell運行多個cmd命令提示符