0

这个可能真的很简单，但是几天来我一直在绞尽脑汁。我有一个输出图像的 php 脚本，并且在每个输出的图像上，当用户将鼠标悬停在它上面时，会显示带有信息和选项的元素。但是我似乎只能弄清楚如何通过它的 id 来获取每个元素，这不起作用，只允许第一个输出的图像显示它的翻转，而且 Id 应该是唯一的，所以这种方式是无用的。然后我通过在 Jquery 中获取元素类来做到这一点，那时我遇到了另一个问题，每次我将图像悬停在显示的所有隐藏元素上时，所以将鼠标悬停在图像上显示图像 1,2 的选项， 3,4,5,6,7,8.... Grrrr！

所以 tis 是我使用的原始 Javascript：

function thumbToggle() {
        var opt = document.getElementById("rem");
        var text = document.getElementsByTagName("thumbrem");
            if(opt.style.display == "block") {
                opt.style.display = "none";
                text.innerHTML = "⇓";
            }
            else {
                opt.style.display = "block";
                text.innerHTML = "⇑";
        }
    }

真的很简单，但我对 JS 的了解也是如此。所以 Js 对我没有用，Jquery 也没有。我唯一需要对此进行排序的想法是添加一个 ID，然后在其后连接一个递增的数字，从而使每个 ID 唯一，然后对 HTML 中的 ID 执行相同的操作，使 ID 匹配。

唯一的问题是我不知道该怎么做，我不知道这是否真的有效，我认为是时候举手承认我需要一些 Stack Overflow lovage。

这是输出图像的PHP部分......

// image output

<div style='position:relative; display:inline; width:200px; overflow:hidden;'>
    <div style='position:relative;'>
        <a id="thumbrem" onmouseover='thumbToggle();' class='thumbrem' style='position:relative;' href=\"show-image.php?id=$id\">
            <img class='lifted drop-shadow' src=\"thumb.php?id=$id\">
        </a>

// The element that appears on rollover

<div id='rem' class='rem'>          
     <div style='padding-bottom:5px;'>
      <label style='color:#fff;'>Select:</label>
         <form method=\"POST\" action='myimages.php'>
           <input type='checkbox' name='images[]' value='$id'>&nbsp;&nbsp;
         </form>                    
 </div>

     <div style='color:#fff;'>
      <a href=\"myimages.php?id=$id&act=delete\">Delete</a>
             &nbsp;|&nbsp;
          <a class='' href=\"myimages.php?id=$id&act=changetags\">Edit Tags</a>
     </div>

 <div style='color:#fff; padding-bottom:3px;'>Size:{$details[$i]}</div>
 <div style='color:#fff padding-bottom:3px;'>Date:  {$date[$i]}</div>
 <div style='color:#fff'>Views:  {$views[$i]}</div>

    </div>          
</div>

为阅读的男孩和女孩干杯，我希望很快能听到你们中的一些人的消息。

提前干杯，杰米

4

1 回答 1

0

在 javascript 事件处理程序中，关键字this是处理程序附加到的 html 元素。

所以你不需要在你的 thumbToggle 函数中有一个自动递增的 id。只需使用它来检索悬停的链接。

于 2012-06-04T16:04:05.930 回答