jQuery 没有做我想做的事

Question

我在使用一点 jQuery 时遇到了问题，并认为社区中的某个人可以帮助我吗？所以，我的标记如下：

<div class="left">
    <ul id="editing-nav">
        <li><a class="active testforso" href="#TestForSO">Test For SO</a></li>
        <li><a class="testforso2" href="#TestForSO2">Test For SO2</a></li>
        ...and so on.
    </ul>
</div>

<div class="scroll">
    <div class="scrollContainer">
        <div id="testforso">
            ...some content
        </div>
        <div id="testforso2">
            ...some content
        </div>
        ...and so on.
    </div>
</div>

所以，基本上 - .left 向左浮动，而 .scroll 在右侧。我正在寻找一种方法，以便活动导航元素（默认情况下是第一个，然后当用户单击另一个元素时，它会为该元素分配一个“.active”类并删除前一个的活动类）的共同内部 div 有一个显示：块，而所有其他的隐藏。我在fancybox里面做这个，这让它有点复杂，但这是我现在所拥有的-

$('#editing-nav li > a').click(function() {
        $('#editing-nav li > a').removeClass('active');
        $(this).addClass('active');
        activeClassID = $(this).attr('class');  // grabs the nav class for the id to show in .scroll
        var divIDToShow = ('.scroll .scrollContainer #') + activeClassID;       // grabs the DOM path & ID of the coinciding div to show
            divIDToShow = divIDToShow.replace(' active', ''); // removes " active" from the class (because before it would have a class of "testforso2 active"; now it just has "testforso".
        $('.scrollContainer div:not(#' + divIDToShow + ')').hide();
        $('.scrollContainer #' + divIDToShow ).show();
    });

这适用于某人点击的第一个链接，但在那之后无效。我不知道我之前是否清楚，但#editing-nav li a 的类与要在 .scroll 中显示的 div 相结合。

有什么想法吗？我不知道为什么会这样...谢谢！

Answer 1

此问题与您的 id 选择器有关 - 请改用 this

编辑

在这里找出真正的问题 - 不知道为什么它第一次起作用，但您的 divIDToShow 变量包含太多信息。见here for a cut down version

Answer 2

它这样做的原因可能是因为它在第一次点击时遇到了错误。 'active testforso'.replace(' active') 的计算结果为 'active testforso'，因为字符串中没有 ' active'。即使您解决了这个问题，您也不知道“活动”是在类字符串的前面还是后面。您可以改为使用 .replace(/\s*active\s*/, '') ，但我下面的示例只是删除了所有空格。

我认为您可能可以将代码更改为：

$('#editing-nav li > a').click(function() {
    $('#editing-nav li > a:active').removeClass('active');
    $(this).addClass('active');
    activeClassID = $(this).attr('class');  // grabs the nav class for the id to show in .scroll
    var divIDToShow = activeClassID;       // grabs the DOM path & ID of the coinciding div to show
    divIDToShow = divIDToShow.replace('active', '').replace(/\s+/g,''); // removes "active" from the class then remove all spaces in what's left - "testforso2 active"; now it just has "testforso".
    $('.scrollContainer div:not(#' + divIDToShow + ')').hide();
    $('#' + divIDToShow ).show();
});

但是：

您可能想要使用jQuery-BBQ plugin，而不是执行所有这些操作，它允许您通过哈希跟踪状态。因此，您可以只检测散列的变化，例如，使用散列作为 id 本身。