Как получить доступ к данным из атрибута data* с помощью JavaScript?

Сценарий: когда пользователь нажимает на него, данные должны быть переданы в someFunction().

<span id="someid" onClick={() => someFunction()} data-video-page="some data" class="dot" />`

Я пытался использовать методы getAttributes(), querySelector() до сих пор, чтобы получить данные из атрибутов данных. Но один из них работает, на самом деле они не возвращаются.

Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
учебник по Javascript
учебник по Javascript
JavaScript - это язык программирования, который обычно используется для добавления интерактивности и других динамических функций на веб-сайты. Он...
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
D3.js - это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы разберем основные варианты...
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Принцип единой ответственности (SRP): класс должен иметь только одну причину для изменения. Другими словами, у него должна быть только одна...
JavaScript - For Loop
JavaScript - For Loop
Наиболее используемая компактная форма оператора цикла.
Неделя 1 - Карточки с временной шкалой
Неделя 1 - Карточки с временной шкалой
Поскольку это была первая неделя, я решил начать с простого. Предполагалось, что у меня будет временная шкала с несколькими карточками, которые можно...
0
0
56
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Доступ к атрибуту data* можно получить с помощью метода getAttribute().

Пример 1:

var data = document.getAttribute('data*');

Пример 2:

var element = document.querySelector('div');
var data = element.getAttribute('data');
Ответ принят как подходящий

В вашем вопросе есть тег React.js, поэтому я предполагаю, что это для использования data-set в React.js.

Для React.js именно так можно использовать набор данных, если вы хотите передать данные какой-либо функции в событии щелчка. Вы также можете посетить живую демонстрацию здесь: stackblitz

const handleClick = (event) => {

  // Your data is stored in event.currentTarget.dataset
  // Here we get the data by destructuring it
  // The name video-page need to change to videoPage for JS rules

  const { videoPage } = event.currentTarget.dataset;
  console.log(videoPage);

  // Result printed: "your data"
  // You can also run someFunction(videoPage) here
};

export default function App() {
  return (
    <button data-video-page="your data" onClick={handleClick}>
      TEST
    </button>
  );
}


Рабочий фрагмент

const someFunction = console.log;

function App() {
    return (
        <span id="someid" 
          onClick={(e) => {
            const videoPage = event.target.dataset['videoPage'];
            someFunction(videoPage)
          }} 
          data-video-page="some data" 
          className="dot" 
        >
        click me
        </span>
     )
}

ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Другие вопросы по теме