Question

https://codepen.io/anon/pen/NLNVbM

 <button class="button" onClick= "document.getElementById('demo').dataset('data-filter') = '.blue';">Test</button>

<button id="demo" class="button" data-filter=".orange"><h4>Color</h4></button>

我想在单击时将.orange更改为.blue。这行不通，我做错了什么？

Answer 1

您没有正确访问data-属性。阅读以下内容：https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

var filter = document.getElementById('demo').dataset.filter;

//Original data-filter value:
console.log(filter);

//Add a click event handler to the button:
document.querySelector('#changeFilter').addEventListener('click', function() {
  filter = '.blue';
  //Updated data-filter value
  console.log(filter);
});

<button id="changeFilter" class="button">Test</button>

<button id="demo" class="button" data-filter=".orange"><h4>Color</h4>
</button>

Answer 2

您都在错误地建立索引并调用HTMLElement.dataset。您的onclick处理程序应改为阅读...dataset['filter'] = '.blue'。

Answer 3

问：/使用onClick更改数据过滤器？ R：/ bla bla bla bla bla bla 30 line：v

<button class="button" onClick= " document.getElementById('demo').setAttribute('data-filter','.blue');">Test</button>

<button id="demo" class="button" data-filter=".orange"><h4>Color</h4></button>

使用onClick更改数据过滤器？

3 个答案: