Question

这是我的HTML：

<div id="sidebar">

    <table id="table1">

        <tr>
            <th>Charities</th>
        </tr>

        <tr>
            <td>
                <a rel="group1" class="links">Age UK</a>
            </td>
        </tr>

        <tr>
            <td>
                <a rel="group2" class="links">Brainstrust</a>
            </td>            
        </tr>
    </table>
</div>

<div id="box">
    <img alt="" src="image1.png" id="group1" class="groups"/>
    <img alt="" src="image2.png" id="group2" class="groups"/>


<span id="group1" class="groups">1st span</span>
<span id="group2" class="groups">2nd span</span>

我的jQuery：

$( 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时，会显示相应的图像。但是，当第一个td被点击时，第一个应该可见时，所有跨度都保持隐藏。与第二个相同。为什么跨度不可见？

.groups正在使用javascript，因为当我打开网页时看不到任何内容。但是，当我点击其中一个td时，图像会显示，但不会显示其中的范围。我认为这意味着span的id不能与jQuery的fadeIn部分一起使用。我该怎么做才能使＃+ rel与span id相同？看起来它们应该是平等的，所以我不知道我是否正确地说它没有正确连接 - 只是我最好的猜测。

Answer 1

您的代码中没有任何内容可以显示跨度。为每个范围添加一个id，最好是＆＃34; txtimg1＆＃34;和＆＃34; txtimg2＆＃34;。然后在您的jQuery中，您可以使用与图像处理方式类似的方式引用它。

$('#txt'+rel).fadeIn('slow');

Answer 2

我无法在代码中的任何位置看到任何隐藏/显示范围的JavaScript。

您可以像这样更改HTML：

<div id="box">
    <div id="img1">
        <img src="cant-believe-it-icon.png" alt="" />
        <span>Text with fist image</span>
    </div>
    <div id="img2">
        <img src="too-much-icon.png" alt="" />
        <span>Text with second image</span>
    </div>
</div>

或类似的东西：

<a rel="group1" class="links">Age UK</a>

<div id="box">
    <img alt="" src="image1.png" id="group1" class="groups" />
    <img alt="" src="image2.png" id="group2" class="groups" />

    <span id="group1_text" class="groups">1st span</span>
    <span id="group2_text" class="groups">2nd span</span>
</div>

和

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

Answer 3

你可能是jQuery的新手，这就是为什么你犯了小错误而不是犯错误的原因。让我为你解释代码。

以下是您正在使用的代码。它不起作用，甚至它也不会隐藏启动时的元素。

http://jsfiddle.net/afzaal_ahmad_zeeshan/ekh2g/

代码的初始状态。

第一个错误

你正在做的第一个错误已被百万次发帖谈论过。对不起，如果你从来不知道。但是，您需要了解文档加载事件中的jQuery代码必须，而不是窗口加载事件。

这样的事情：

$(document).ready(function () {
  /* all of the code here */
});

现在处理事件

现在，当我删除$(window).load(function () { ... })时，您可以看到下方隐藏了跨度。

http://jsfiddle.net/afzaal_ahmad_zeeshan/ekh2g/1/

我已经注释掉了您的代码，然后使用警报来检测正常运行的功能。它工作正常，完美。

删除了评论;它现在消失了

现在我已删除了代码周围的注释。现在，一旦你点击超链接。你会看到元素渐渐消失。

这就是问题所在。这里是小提琴：http://jsfiddle.net/afzaal_ahmad_zeeshan/ekh2g/2/你会看到，现在代码正在按照它被告知的方式运作。

主要问题是代码的事件处理程序。哪个必须始终是文档就绪功能。

单击另一个对象时如何显示跨距

3 个答案:

第一个错误

现在处理事件

删除了评论;它现在消失了