javascript - 创建在单击另一个对象时隐藏的跨度

Question

这是我的 html:

<div id="sidebar">
    <table id="table1">
        <tr>
            <th>Table</th>
        </tr>
        <tr>
            <td>
                <a rel="img1">Link1</a>
            </td>
            <td>
                <a rel="img2">Link2</a>
            </td>            
        </tr>
    </table>
</div>

<div id="box">
    <img src="cant-believe-it-icon.png" id="img1"/>
    <img src="too-much-icon.png" id="img2"/>
</div>

<span>Text with fist image</span>
<span>Text with second image</span>

还有我的 jQuery:

$('a').click(function(){
    imgid = $(this).attr('rel');
    $('a').removeClass('active');
    $(this).addClass('active');

    $('img').hide();    
    $('#'+imgid).fadeIn('slow');
});

单击第一个 td 时，第一个图像可见。当点击第二个 td 时，第一个图像隐藏，第二个图像可见。我如何将其应用于跨度？

更新:我为所有图像设置并跨越一个类=“组”。然后我使用 id="group1"、"group2"等将第一张图像与第一个跨度等配对。然后我将 td 的 rel 设置为“group1”、“group2”等。javascript 现在显示为:

$( window ).load(function() {
    $(".groups").hide()
    $('a').click(function(){
    var rel = $(this).attr('rel');
    $('a').removeClass('active');
    $(this).addClass('active');
    $(".groups").hide()
    $('#'+rel).fadeIn('slow');
});

打开时一切都隐藏起来，但是当点击 td 时没有任何反应？

Answer 1

Solution

HTML

<div id="box">
  <img src="http://placehold.it/350x250/&text=img1" class="img1"/>
  <img src="http://placehold.it/350x250/&text=img2" class="img2"/>
</div>

<span class="img1">Text with fist image</span>
<span class="img2">Text with second image</span>

CSS

$('a').click(function(){
  var rel = $(this).attr('rel');
  $('a').removeClass('active');
  $(this).addClass('active');
  $('img').hide();    
  $('span').hide();   
  $('.'+rel).fadeIn('slow');
});