Question

全部好，

我是一个真正的JS初学者，因此我一直在使用一些简单的jQuery来帮助我获得我想要的效果。一切顺利，直到我尝试实现jQuery切换效果。我希望代码适用于多个元素，所以我试图将其缩小并使其成为通用的，而不是为每个切换选项卡写一行。

我似乎无法让它发挥作用！

主管w / javascript：

<head>
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('#content div[id^=toggle]').hide();
    $('[class^=info]').click(function() {
        var x = $(this).attr("idName");
        $('#toggle_' + x).toggle();
        return false;
        });
    });
</script>

</head>

体：

<div id="content">
    <div class="info_tab" id="info_grover">
        <img src="images/pgrover_120x137.jpg" alt="Philip Grover" />
        <h1>Philip Grover</h1><br />
        <p>Info about Philip Grover</p>
    </div>
    <div id="toggle_info_grover">
    </div>
    <div class="info_tab" id="info_lewis">
        <img src="images/rlewis_120x137.jpg" alt="Roy Lewis" />
        <h1>Roy Lewis</h1><br />
        <p>Info about Roy Lewis</p>
    </div>
    <div id="toggle_info_lewis">
    </div>
</div>

我知道答案可能非常简单，我怀疑它与我使用“this”关键字有关，但经过一个小时的搜索后，我似乎无法解决我的具体情况。我真的很感激任何建议。

提前致谢，

富

Answer 1

您的代码正在查找名为“idName”的属性，但您的HTML元素都没有该属性。我想你只想要“id”。

    var x = $(this).attr("id");

或者更简单地说，

    var x = this.id;

Answer 2

顺便说一句，这很复杂。如果你的“toggler”总是下一个元素，你最好使用像clickable元素的“toggler”这样的类（没有别的，没有ID，没有任何东西）并使用：

$('.toggler').click( function() {
$(this).prev().toggle();
});

初学者Javascript：jQuery'切换'问题

2 个答案: