js獲取data-xx自定義屬性值,data-xx自定義屬性

在當前div上定義一個點擊事件
當然這裏的data-xx名字時可以自己 定義的但是我們一般定義爲與元素的值由對應意義的名字

<div  onClick={this.handleClick}>
          <div data-index='1'>小強</div>
          <div data-index='2'>小紅</div>
          <div data-index='3'>小明</div>
          <div data-index='4'>小目</div>
</div>

//之後我們去方法當中去定義一個對應的方法去獲取值,會獲取到自定義屬性的一個對象集合
handleClick(event){
	// 這樣取值
	const dataset  = event.target.dataset;
	const index = dataset.index;
	console.log('當前元素index 值爲 ', index);
}

還有的時候元素層級深,只想獲取到當前綁定事件元素的自定義屬性,請看下面場景;

<div >
          <div data-index='1' onClick={this.handleClick}><span>小強</span></div>
          <div data-index='2' onClick={this.handleClick}><span>小紅</span></div>
          <div data-index='3' onClick={this.handleClick}><span>小明</span></div>
          <div data-index='4' onClick={this.handleClick}><span>小目</span></div>
</div>

//之後我們去方法當中去定義一個對應的方法去獲取值,會獲取到自定義屬性的一個對象集合
handleClick(event){
	// 這樣需要把 target 改變成 currentTarget,避免點擊到span, 取不到div上面的值
	const dataset  = event.currentTarget.dataset;
	const index = dataset.index;
	console.log('當前元素index 值爲 ', index);
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章