javascript - onmouseover 事件更改另一个元素的 css - 两者都具有相同的动态 ID

Question

我有来自 for 循环的图像元素，右上角有一个 X，用于将它们从数据库中删除。

我决定将其改为单击图像将其删除。在那之后，我完全失去了 X，但我突然想到，如果 X 显示备份 onmousover 以指示图像将被删除(仍然不确定我是否要使用不透明度 0 -> 不透明度 1 或白色 -> 红色)。

这是我的图片:

<div class="close"><i id="<?php echo $images[$i]->id; ?>" class="fas fa-times"></i></div>
<img id="<?php echo $images[$i]->id; ?>" onclick="delete_img(this.id);" onmouseover="show_x(this.id)" src="https://drive.google.com/thumbnail?id=<?php echo $images[$i]->image_id; ?>&export=view&sz=w250">

还有我的 jquery

function show_x(id)
{
  $("#" + id).css("color", "red");
}

相关 CSS:

.fas
{
    color: #ffffff;
}

确实感觉这应该行得通，但实际上行不通。我知道我正在进入这个功能，因为我可以写:

alert(id);

它完全符合我的预期。我知道 jQuery 运行正常，因为其他 jQuery 函数 delete_img(id) 运行正常。

任何见解都值得赞赏。如果这是一个愚蠢的问题，请原谅我，因为我不知道我在做什么。

我也试过给他们不同的 ID..比如将“x_”添加到 Font Awesome div ID，并像这样修改 jQuery:

function show_x(id)
{
  $("#x_" + id).css("color", "red");
}

但这也没有用。

Taplar，看这个:

<i class="fas fa-times <?php echo $images[$i]->id; ?>" style="color: white;"></i>

和

function show_x(id)
{

  $("."+id).css("color", "red");
}

很抱歉制作了无效的网络标记，但这似乎也不起作用。

Answer 1

您可以使用 CSS 来定位关闭图标，而不是依赖 jQuery。

如果您放弃鼠标悬停功能，并稍微修改图库代码，那么 delete_img()函数位于包含 img 的标签上，例如 anchor 标记 <a href="#"> .这样您就可以仅使用 CSS 来实现显示删除图标。

您可能需要修改您的 delete_img()适应功能。

请看下面的例子...

a {
  display: block;
  position: relative;
  float: left;
}

a > .fas {
  transition: opacity 0.15s ease-in-out;
  opacity: 0;
  position: absolute;
  top: 20px;
  left: 20px;
  color: white;
  z-index: 2;
}

a:hover > .fas {
  opacity: 1;

}

a:after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: black;
  opacity: 0;
}

a:hover:after {
  opacity: .5;
}

img {
  display: block;
}

<a
   id="image-1"
   href="#"
   onclick="delete_img(this.id);"
>
  <i class="fas fa-times">close icon</i>
  <img src="https://i.imgur.com/JJLSCq0.png"/> 
</a>

记得加上event.preventDefault();在 delete_img() 上功能。我也会避免使用 onclick在你的 html 中。并将其写在您的脚本中。