是的你可以。从本质上讲，HTML元素只是带有属性/键和值的Java脚本对象。因此您可以向一个HTML Element对象添加一个键和一个值。

但您必须将其添加到位于元素内部的dataset对象中，如下所示：

element.dataset.txt = 'This is a value' // Just like a JS object

您需要的实际示例可能如下所示：

function addAndShowVariable(event) {
  const currentElement = event.currentTarget
  currentElement.dataset.txt = 'This is the extended data'

  currentElement.innerHTML += currentElement.dataset.txt
}

<div onclick="addAndShowVariable(event)">Click to see more </div>

要访问您所单击的特定元素的数据/变量，必须将event对象作为函数参数传递。此event对象由Click事件(或任何其他事件)自动提供给您。

当然，在您的例子中，您可能希望在初始页面/组件加载时添加属性/变量，并且只在单击时注入或显示它--实质上将上面的函数一分为二。

元素具有属性，因此您可以将信息放入属性中。自定义属性通常应为data attributes。单击时，检查父元素是否具有您感兴趣的属性之一，如果有，则切换该父元素。

document.addEventListener('click', (e) => {
  const parent = e.target.closest('[data-spoiler]');
  if (!parent) return;
  const currentMarkup = parent.innerHTML;
  parent.innerHTML = parent.dataset.spoiler;
  parent.dataset.spoiler = currentMarkup;
});

<div data-spoiler="foo">text 1</div>
<div data-spoiler="bar">text 2</div>

这是最接近于“特定html元素的本地变量”。要在JavaScript中完全定义文本，一种选择是使用数组，然后在数组中查找扰流元素的单击索引。

const spoilerTexts = ['foo', 'bar'];
const spoilerTags = [...document.querySelectorAll('.spoiler')];

document.addEventListener('click', (e) => {
  const parent = e.target.closest('.spoiler');
  if (!parent) return;
  const currentMarkup = parent.innerHTML;
  const index = spoilerTags.indexOf(parent);
  parent.innerHTML = spoilerTexts[index];
  spoilerTexts[index] = currentMarkup;
});

<div class="spoiler">text 1</div>
<div class="spoiler">text 2</div>

还有一些库允许这样的事情，方法是将每个元素与一个组件(库使用的一个JavaScript函数/对象)相关联，并以某种方式向该组件发送一个变量。

// for example, with React

const SpoilerElement = ({ originalText, spoilerText }) => {
  const [spoilerShown, setSpoilerShown] = React.useState(false);
  return (
    <div onClick={() => setSpoilerShown(!spoilerShown)}>
      { spoilerShown ? spoilerText : originalText }
    </div>
  );
};
const App = () => (
  <div>
    <SpoilerElement originalText="text 1" spoilerText="foo" />
    <SpoilerElement originalText="text 2" spoilerText="bar" />
  </div>
)

ReactDOM.createRoot(document.querySelector('.react')).render(<App />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div class='react'></div>