的JavaScript的HTML標籤內

Question

我想引用一個JavaScript變量的HTML標籤中是這樣的：

<ul data-target="#{this.state.name}"></ul> 

，但它似乎並不像，這是有效的語法。我知道這在Coffeescript中是可行的，但Javascript中是否有類似的語法？我正在使用ES6。

Answer 1

你似乎在尋找template literals，讓你做串插在ES6。相當於的Coffeescript

"<ul data-target=\"#{this.state.name}\"></ul>" 

將

`<ul data-target="${this.state.name}"></ul>` 

Answer 2

您應該刪除引號。並用state.name值連接＃。

<ul data-target={"#" + this.state.name}></ul> 

Answer 3

我相信這是不可能的，沒有一些框架，例如。角。

在另一方面，你可以設置使用普通的JavaScript元素的屬性：

document.getElementById("my-thingy").setAttribute("data-target", "someStateName"); 

Answer 4

當醫生說

的HTMLElement.dataset屬性允許訪問，無論是在閱讀和寫作 模式，到 元素上設置的所有自定義數據屬性（data- *）。它是DOMString的一個映射，每個自定義數據的一個條目 屬性。

參見： https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

使用DOM元件上的數據集屬性獲取整個數據集的對象。

var eleDOM = document.getElementById('list'); 

eleDOM.dataset;

獲取個人屬性

eleDOM.dataset.data1; 

修改各個數據屬性

eleDOM.dataset.data1 = "modified"; 

//Fetch the entire dataset object using the dataset property on the DOM element. 
 
var eleDOM = document.getElementById('list') 
 
console.log(eleDOM.dataset); 
 

 
//fetch the individual property 
 
console.log(eleDOM.dataset.data1); 
 

 
//Modify the individual data properties 
 
eleDOM.dataset.data1 = "modified";

<ul id ='list' data-data1 = "Panner" data-data2="Cheese"> 
 
</ul>