如何使用鼠标悬停（或悬停）以便在 go 在不同的文本上显示不同的图像？ JAVASCRIPT

Question

我目前正在做 CS50，我需要编写一个小 html 页面，插入来自 Javascript 的交互式元素。我完全是这种语言的初学者，我正在尝试找出如何在我 ZE0542F579DF58E81238ZADEF9 上显示一个文本时显示图像。 显然，互联网上关于这个的话题几乎为零，我只发现了这个，它确实有效，但只适用于第一张图片。原因是因为所有网址的“id”都是相同的，我明白了，但怎么能我修改了代码，以便它适用于所有不同的文本/图片？我有点了解全貌，因为我知道 Python 但 html 和 Js 对我来说是全新的。任何帮助将不胜感激，谢谢

 <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

id 必须是唯一的。 所以你需要找到一种不同的方式来 select 元素。 由于它是兄弟，您可以使用 prev() 到 select 它。

 $(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>