Javascript 创建在单击其他对象时隐藏的跨距

这是我的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>

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

更新：我为所有图像设置并跨越一个class=“groups”。然后我使用id=“group1”、“group2”等将第一个图像与第一个span等配对。然后我将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时，什么都不会发生？

请使用特定的类，而不是在图像中使用ID，并将相同的类添加到跨度中。因此，与该类的图像一起使用时，跨度也将显示/隐藏。修改代码：

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

下面是JSFIDLE的链接：

它的工作原理与此相同

看一看中间：

---

在跨度上使用

rel

属性：

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

旁注：最好使用

datarel

属性，因为这就是

data-*

属性的用途

HTML

---

我是否可以建议在单击功能之外添加隐藏，使其在默认情况下不显示？另外，为什么不把

放在span内呢？您是否更改了html？在您的示例中，我需要在javascript中更改什么来设置图像类？例如，如果我将第一个图像和span的类设置为“group1”，将第二个设置为“group2”，javascript应该读取什么？（我还没来得及学习javascript）。假设您必须隐藏“group2”类，然后将此代码：“$（'img，span'）.hide（）；”替换为$（'.group2'）.hide（）；”<代码>imgid.substr（4）-1*1。。。为什么？

$('a').click(function(){

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

    $('img').hide();    
    $('span').hide();
    spanid = imgid.substr(4) - 1*1;
    $('#'+imgid).fadeIn('slow');
    $('span:eq('+spanid+')').fadeIn('slow');

});

$('a.show').click(function()
{
    $('.hideSpan').fadeIn();
});

$('a.hide').click(function()
{
    $('.hideSpan').fadeOut();
});

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

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

    $('img, span').hide();    
    $('#'+imgid + ', span[rel="' + imgid + '"]').fadeIn('slow');
});

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

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