javascript - 传递给 javascript 函数 div 类参数

Question

我在某个网站上工作。我有个问题。如何给 JS 函数赋予类名。这是我的代码:

<div class="grid-item">
    <div id="info">
        <div class="glyphicon glyphicon-search" style="hidden: hidden;">
        </div>
        <img onmouseover="show(this)" onmouseout="hide(this)" src="'smiley.gif'" />
    </div>
</div>

我的 JS 函数是这样的

function show(x) {
    x.style.hidden= visible;
}

function hide(x) {
    x.style.hidden= hidden;
}

但是在onmouseover 和onmouseout 中我不想使用this。我要显示或隐藏什么

<div class="glyphicon glyphicon-search" style="hidden: hidden;"></div>

来自 html。这个怎么做？我的想法是给这个 div id，然后那个 id 传递给函数，但是如何做到这一点。

请记住，每张图片我都会有很多 div 标签 ()。

以及如何将该 div 定位在图像的右上角？

谢谢。

Answer 1

如果您正在使用 jQuery，请使用它。

function show(x) {
    $(x).prev('div.glyphicon.glyphicon-search').show();
}
function hide(x) {
    $(x).prev('div.glyphicon.glyphicon-search').hide();
}

但更喜欢做这样的事情。为这些图像添加一个类笑脸。

<img class="smiley" src="'smiley.gif'" />

然后

$('img.smiley').on('hover', show, hide);

function show() {
    $(this).prev('div.glyphicon.glyphicon-search').show();
}
function hide() {
    $(this).prev('div.glyphicon.glyphicon-search').hide();
}

或者使用mouseover/mouseout 事件和事件委托(delegate)，

$(document)
    .on('mouseover', 'img.smiley', show)
    .on('mouseover', 'img.smiley', hide);