0

これはおそらく非常に単純ですが、ここ数日間、頭を悩ませています。画像を出力するphpスクリプトがあり、出力された各画像で、ユーザーがその上にカーソルを合わせると、要素が情報とオプションとともに表示されます。ただし、各要素を ID で取得する方法しか考えられませんが、これは機能せず、最初に出力された画像にロールオーバーを表示することしかできず、ID は一意である必要があるため、この方法は役に立ちません。次に、Jqueryで要素クラスを取得することでそれを行いました。それまでに、表示されているすべての非表示要素の画像をホバーするたびに別の問題が発生したため、画像1にマウスを合わせると、画像1、2のオプションが表示されました。 3,4,5,6,7,8.... うわー！

だから、これは私が使用した元の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 を一致させることです。

唯一の問題は、それを行う方法がわからないことです。それが本当に機能するかどうかわかりません。手を上げて、スタックオーバーフローの愛が必要であることを認める時が来たと思います。

これは、画像を出力する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 イベント ハンドラー内では、keywordthisはハンドラーがアタッチされる html 要素です。

したがって、thumbToggle 関数で自動インクリメントされた ID を使用する必要はありません。これを使用して、ホバーされたリンクを取得します。

于 2012-06-04T16:04:05.930 に答える