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并使用类和数据属性，我可能会略微区别对待它。这里我有所有元素的类和数据属性。我将点击事件监听器附加到＆＃34;按钮＆＃34;调用handleClick函数。此函数检查按钮的数据id属性并抓取相应的幻灯片，添加＆＃34; show＆＃34;类到它的类列表。

＆＃13;

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');
}

＆＃13;

.slide {
  display: none;
}

.show {
  display: block;
}

＆＃13;

<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>

＆＃13;

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>

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

6 个答案:

将参数传递给函数