提问者:小点点

CSS如何使用onclick和this绑定到不同的元素


好的,我会尽力解释的。

下面是我的代码:

HTML:

<div class="mobile-wrapper">
            <div id="mobile" class="mobile">
                <img src="assets/images/mobile-moments-away-img.png">
                <img id="mobile-close-btn" class="mobile-close-btn" src="assets/images/mobile-close-button-img.png" onclick="handleClose(this)">
                <img id="mobile-continue-btn" class="mobile-continue-btn" src="assets/images/mobile-continue-now-img.png">
            </div>
        </div>

JS:

const handleClose = (elem) => {
  console.log(elem);
  elem.style.display = "none";
};

因此,当前handclose函数当前隐藏元素,在本例中,它关闭具有onclick=“handleclose(this)的图像。我需要的是,当我单击该图像时,它关闭mobile类,而不是关闭该图像。因此,我不确定如何在使用this的同时引用mobile类。

我必须使用这个,正如我也被要求的那样。因为我有和上面一样的HTML,但是用于不同的图像,因为JavaScript函数将为上面的HTML以及我有的不同图像做同样的事情。例如:我的handleclose函数将使用不同的元素,但做相同的事情,因此我使用this。因此,我希望得到一些帮助,而不是被告知以不同的方式执行例如getElementById,因为这不是我所需要的。


共1个答案

匿名用户

您可以使用.parentElement引用父元素:

null

const handleClose = (elem) => {
  elem.parentElement.style.display = "none";
};
<div class="mobile-wrapper">
  <div id="mobile" class="mobile">
    <img src="assets/images/mobile-moments-away-img.png">
    <img id="mobile-close-btn" class="mobile-close-btn" src="assets/images/mobile-close-button-img.png" onclick="handleClose(this)">
    <img id="mobile-continue-btn" class="mobile-continue-btn" src="assets/images/mobile-continue-now-img.png">
  </div>
</div>

相关问题