获取单击元素的ID并将其包含在纯JS的函数中？

Question

我需要根据点击的每个不同图标显示不同的输出，而不定义单独的功能;

HTML：

<p onclick="expand()" id="i1">icon1</p>
<p onclick="expand()" id="i2">icon2</p>
<p onclick="expand()" id="i3">icon3</p>
<div id="blocki1"></div>
<div id="blocki2"></div>
<div id="blocki3"></div>

我可以用JS做这样的事吗？

function expand() {
document.getElementById("block" + this.id).style.display = "block";
}

我已经尝试过上面显然不起作用的方法，我需要a）存储图标的id和b）将id与字符串结合起来。不确定这是否可行。

Answer 1

<p onclick="expand(this.id) id="i1">icon1</p>
<p onclick="expand(this.id) id="i2">icon2</p>
<p onclick="expand(this.id) id="i3">icon3</p>
<div id="blocki1"></div>
<div id="blocki2"></div>
<div id="blocki3"></div>
<script>
function expand(e) {
document.getElementById("block" + e).style.display = "block";
}}
</script>

Answer 2

首先..你有4个拼写错误。前3是你在"之后没有关闭onclick="expand()

<p onclick="expand() id="i1">icon1</p>
<!-- There needs to be " after expand() -->

最后的错字是你在扩展功能后有额外的关闭}。

现在，由于您没有使用addEventListener API，因此不会在expand函数上设置此值。因此，您需要将当前元素作为参数传递给函数。

<p onclick="expand(this)" id="i1">icon1</p>
<p onclick="expand(this)" id="i2">icon2</p>
<p onclick="expand(this)" id="i3">icon3</p>
<div id="blocki1">blocki1</div>
<div id="blocki2">blocki2</div>
<div id="blocki3">blocki3</div>

（在div中添加了一些占位符文本以查看是否有效）

最后，访问函数中的当前元素作为第一个参数。

function expand(el) {
  document.getElementById("block" + el.id).style.display = "block";
}

Answer 3

将参数传递给函数

您需要将一些数据（例如对对象的引用，名称或您需要的任何其他内容）传递给您正在调用的函数。

例如，查看https://www.w3schools.com/jsref/event_onclick.asp的示例代码

<p onclick="myFunction(this, 'red')">Click me to change my text color.</p>

<script>
function myFunction(elmnt,clr) {
    elmnt.style.color = clr;
}
</script>

Answer 4

通过删除内联JS并使用类和数据属性，我可能会略微区别对待它。这里我有所有元素的类和数据属性。我将click事件监听器附加到调用handleClick函数的“按钮”。此函数检查按钮的data id属性并抓取相应的幻灯片，在其类列表中添加“show”类。

const buttons = document.querySelectorAll('.button');

buttons.forEach(button => {
  button.addEventListener('click', handleClick, false);
});

function handleClick(e) {
  const id = e.target.dataset.id;
  const slide = document.querySelector(`.slide[data-id="${id}"]`);
  slide.classList.add('show');
}

.slide {
  display: none;
}

.show {
  display: block;
}

<p class="button" data-id="1">icon1</p>
<p class="button" data-id="2">icon2</p>
<p class="button" data-id="3">icon3</p>
<div class="slide" data-id="1">blocki1</div>
<div class="slide" data-id="2">blocki2</div>
<div class="slide" data-id="3">blocki3</div>

Answer 5

你的代码应该是这样的

<p onclick="expand(this) id="i1">icon1</p>
<p onclick="expand(this) id="i2">icon2</p>
<p onclick="expand(this) id="i3">icon3</p>
<div id="blocki1"></div>
<div id="blocki2"></div>
<div id="blocki3"></div>

<script>
function expand(elm) {
       document.getElementById("block" + elm.id).style.display = "block";
    }
</script>

Answer 6

如果您是初学者，我建议您在成为您的编码态度之前避免在HTML中添加处理程序。

相反，在js中为它们添加eventlisteners。关注点的分离确实是一个很大的理论。

在事件处理程序中处理this相对容易

你可以阅读更多关于它here

var ps = Array.from(document.querySelectorAll("p"));

for(var i=0; i< ps.length; i++){
  ps[i].addEventListener(("click"), function(){
   document.getElementById("block" + this.id).style.display = "block";
  })
}

div{
  display: none;
}

<p  id="i1">icon1</p>
<p  id="i2">icon2</p>
<p id="i3">icon3</p>
<div id="blocki1">This is 1</div>
<div id="blocki2">This is 2</div>
<div id="blocki3">This is 3</div>