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时，隐藏第一个图像，第二个图像可见。我如何将其应用于跨度？

更新：我为所有图片设置并跨越一个class =“groups”。然后我使用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');
});

Answer 2

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

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

以下是jsfiddle的链接：http://jsfiddle.net/EuGr3/

Answer 3

$('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');

});

Answer 4

它的工作原理相同..

看看jsfiddle：http://jsfiddle.net/kychan/j8vqX/

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

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

Answer 5

在跨度上使用rel属性：

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

JavaScript的：

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

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

旁注：最好使用data-rel属性，因为这是data-*属性的用途。

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

5 个答案:

Solution

HTML

CSS