我如何使用鼠标对(或悬停)，以便我可以显示不同的图像时，我浏览不同的文本？JAVASCRIPT

Question

我目前正在做CS50，我需要编写一个html页面，从Javascript.I中插入交互式元素，我完全是这种语言的初学者，我试图了解如何在文本上悬停时显示图像。显然，互联网上几乎没有这方面的话题，我只发现了这一点，但只有第一个image.The的原因是，"id“对于所有的urls都是一样的，我明白，但是我如何修改代码，以便它可以工作所有不同的文本/图片?我有点了解整个图片，因为我知道me.Any，但是html和Js是全新的me.Any帮助，谢谢。

 <div>
 <table>
   <tr>
     <th>Best Albums</th>
     <th>Year</th>
       </tr>
       <tr>
         <td><img class="hidden" id='image' src="https://cdn.mos.cms.futurecdn.net/2Lm375yVwwGyAHfNFP2HU6-970-80.jpg.webp"/> <span>Spreading the disease</span></td>
     <td>1985</td>
       </tr>
       <tr>
         <td><img class="hidden" id='image' src="https://cdn.mos.cms.futurecdn.net/jP4Fx9doBk4R27kg5hpsrd-970-80.jpg.webp"/> <span>Among the living</span></td>
         <td>1987</td>
       </tr>
        <tr>
        <td><img class="hidden" id='image' src="https://cdn.mos.cms.futurecdn.net/sj49Yj3eJERgwwVbZBZ5nJ-970-80.jpg.webp"/> <span>Persistence of time</span></td>
                <td>1990</td>
        </tr>
        <tr>
          <td><img class="hidden" id='image' src="https://cdn.mos.cms.futurecdn.net/BhDq2Bdm7axUP9erRcs5i9-970-80.jpg.webp"/> <span>Sound of white noise</span></td>
           <td>1993</td>
        </tr>
        <tr>
          <td><img class="hidden" id='image' src="https://cdn.mos.cms.futurecdn.net/fKVNiGMLbFtsXt6uC8aLMm-970-80.jpg.webp"/> <span>We've come for you all</span></td>
           <td>2003</td>
        </tr>
         
        </table>
        <script>
            $(document).ready(function () {
            $('span').hover(function(){
                $(this).addClass('underline');
                $('#image').show();
            },function(){
                $(this).removeClass('underline');
                $('#image').hide();
            });
        });</script>
    </div>
    
    <br><a href="scott.html"><button type="button">Check them out</button></a><br>
    
    </body>

Answer 1

ids必须是唯一的。因此，您需要找到一种不同的方法来选择元素。因为它是同级的，所以可以使用prev()来选择它。

​

$(document).ready(function() {
  $('span').hover(function() {
    $(this).addClass('underline').prev("img").show();
  }, function() {
    $(this).removeClass('underline').prev("img").hide();
  });
});

.hidden {
  display: none;
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <table>
    <tr>
      <th>Best Albums</th>
      <th>Year</th>
    </tr>
    <tr>
      <td><img class="hidden" id='image' src="https://cdn.mos.cms.futurecdn.net/2Lm375yVwwGyAHfNFP2HU6-970-80.jpg.webp" /> <span>Spreading the disease</span></td>
      <td>1985</td>
    </tr>
    <tr>
      <td><img class="hidden" id='image' src="https://cdn.mos.cms.futurecdn.net/jP4Fx9doBk4R27kg5hpsrd-970-80.jpg.webp" /> <span>Among the living</span></td>
      <td>1987</td>
    </tr>
    <tr>
      <td><img class="hidden" id='image' src="https://cdn.mos.cms.futurecdn.net/sj49Yj3eJERgwwVbZBZ5nJ-970-80.jpg.webp" /> <span>Persistence of time</span></td>
      <td>1990</td>
    </tr>
    <tr>
      <td><img class="hidden" id='image' src="https://cdn.mos.cms.futurecdn.net/BhDq2Bdm7axUP9erRcs5i9-970-80.jpg.webp" /> <span>Sound of white noise</span></td>
      <td>1993</td>
    </tr>
    <tr>
      <td><img class="hidden" id='image' src="https://cdn.mos.cms.futurecdn.net/fKVNiGMLbFtsXt6uC8aLMm-970-80.jpg.webp" /> <span>We've come for you all</span></td>
      <td>2003</td>
    </tr>

  </table>
</div>

<br><a href="scott.html"><button type="button">Check them out</button></a><br>

</body>

​