如何让我的 DIVS 像按钮一样更改内容，而不在 html 上添加 onclick 功能答案

【问题标题】：How do i get my DIVS to change content just like the buttons, without adding an onclick function on the html如何让我的 DIVS 像按钮一样更改内容，而不在 html 上添加 onclick 功能
【发布时间】：2021-11-28 07:08:48
【问题描述】：

我正在使用一个 WordPress 主题，它在 div 上没有 onclick 输入。但我只能分配类和 ID。

我连续有四个跨度，每列单击一次，我希望显示相应的段落。

我可以为具有 onclick 属性的按钮执行此操作，但无法为列执行此操作。

请帮助查看代码，看看我如何让 JS 通过调用 ID 来调用段落进行更改，而无需点击 HTML。点击可以在 JavaScript 或 CSS 中。

function changeElement(num) {
  document.getElementById(`paragraph_${num}`).style.display = 'block';
  const arr = [1, 2, 3, 4].filter((elem) => elem !== num);
  arr.forEach((elem) => {
    document.getElementById(`paragraph_${elem}`).style.display = 'none';
  })
}

body {
  width: 100%;
}

.none {
  display: none;
}

div {
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-items: center;
}

span {
  height: 50px;
  width: 50px;
  background-color: green;
}

// the divs that correspond to each button below
<div>
  <span>Div 1</span>
  <span>Div 2</span>
  <span>Div 3</span>
  <span>Div 4</span>
</div>
   
<p id="paragraph_1">paragraph 1</p>
<p id="paragraph_2" class="none">paragraph 2</p>
<p id="paragraph_3" class="none">paragraph 3</p>
<p id="paragraph_4" class="none">paragraph 4</p>
</body>

【问题讨论】：

您能否更好地解释您想要的输出，以便我可以帮助您
我希望每个段落都显示是否单击了相应的 div。无需在 html 上添加 onclick
所以只需在 span 标签上添加 onclick 功能，也与在按钮标签上添加的功能相同
@Hems 我无法在 wordpress 构建器上添加 onclick。我需要直接从javascript调用onclick
如果您可以在主 div 上添加 id，那么您可以轻松地将其定位为 javascript 函数。这是您的代码jsfiddle.net/6vzj9soc/2

标签： javascript html css wordpress

【解决方案1】：

由于 oyu 无法在 html 上添加“onlcik”，我想你可以通过使用 setAttribute() 方法注入 JavaScript 来调用 javascript。

代码如下：

  function set_event(){
    const Div1 = document.getElementById('div1');
    const Div2 = document.getElementById('div2');
    const Div3 = document.getElementById('div3');
    const Div4 = document.getElementById('div4');
    Div1.setAttribute("onclick", "changeElement(1)");
    Div2.setAttribute("onclick", 'changeElement(2)');
    Div3.setAttribute("onclick", 'changeElement(3)');
    Div4.setAttribute("onclick", 'changeElement(4)');
  }
  window.onload = set_event();

  function changeElement(num) {
    document.getElementById(`paragraph_${num}`).style.display = 'block';
    const arr = [1, 2, 3, 4].filter((elem) => elem !== num);
    arr.forEach((elem) => {
      document.getElementById(`paragraph_${elem}`).style.display = 'none';
    })
  }

    body {
      width: 100%;
    }

    .none {
      display: none;
    }

    div {
      display: flex;
      flex-direction: row;
      gap: 20px;
      justify-items: center;
    }

    span {
      height: 50px;
      width: 50px;
      background-color: green;
    }

// the divs that correspond to each button below
<div>
  <span id='div1'>Div 1</span>
  <span id='div2'>Div 2</span>
  <span id='div3'>Div 3</span>
  <span id='div4'>Div 4</span>
</div>
   
<p id="paragraph_1">paragraph 1</p>
<p id="paragraph_2" class="none">paragraph 2</p>
<p id="paragraph_3" class="none">paragraph 3</p>
<p id="paragraph_4" class="none">paragraph 4</p>

<script>

</script>

【讨论】：

@amarachi 总是乐于帮助别人