javascript - 如何让我的 DIVS 像按钮一样更改内容,而不在 html 上添加 onclick 功能
问题描述
我正在使用一个 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>
解决方案
由于 oyu 无法在 html 上添加“onlcik”,我想你可以通过使用该方法注入 JavaScript 来调用 javascript setAttribute()
。
这是代码:
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>
推荐阅读
- python - 在 python BeautifulSoup 或 selenium 中从任何网站中提取社交链接
- javascript - Unity webgl 加载时如何播放视频?
- unit-testing - 为什么我们使用接口来模拟 Golang 方法
- javascript - 如何使用 moment 和 datePicker AntD 将时间更改为格式?
- python - 如何处理python中的嵌套JSON?
- sql - 使用带有 orderBy 子句的连接列
- java - 将 ascii 转换为 int 值
- python - 使用两位数字订购 CSV
- ruby-on-rails - Sass 语法错误:“rgb”的参数数量错误(1 对 3)
- mysql - 使用 PowerShell 的 SQL 连接中的错误