变量toggleClass

Question

我在运行.each函数时遇到了困难，当单击某个div外部的链接时，该函数会打开/关闭该div。这个函数是有效的，除非我希望它适用于几个不同的div(现在是missiondiv和visiondiv)。所以我创建了一个变量前缀，它找到一个span的id，并以这个作为前缀运行函数。(抱歉，如果这没有意义的话)。我的脚本只适用于第一个span id。http://jsfiddle.net/jessica_b/KMJPf/

链接的HTML：

<div id="whoweare">
<span id="mission"><a href='#'>Mission</a></span></br>
<span id="vision"><a href='#'>Vision</a></span></br>
</div>

div的HTML：

<div id="missiondiv" class="closed">Mission item</div>
<div id="visiondiv" class="closed">Vision item</div>

Javascript函数：

    $.each($("#whoweare").find("span").attr("id"), function(){
    var prefix = $("#whoweare").find("span").attr("id");
    $('#' + prefix + ' a').click(function() {
        $('#' + prefix + 'div').toggleClass("closed");
        $('#' + prefix + 'div').toggleClass("item block");
        $(this).toggleClass('active-page');
        $container.isotope('reLayout');
    });
});

它在一个Isotope中运行，但所有这些都在工作。错误存在于上面的脚本中，而我对jQuery还不够熟练，还不能诊断我的错误！谢谢!

Answer 1

$('#whoweare span a').each(function(index, element) {
    $(element).click(function() {
        var prefix = $(this).parent('span').attr('id');
        $('#' + prefix + 'div').toggleClass("closed");
        // other actions
       return false;
    });
});​

http://jsfiddle.net/MtX7p/16/

或

$('#whoweare span').each(function(index, element) {
    $(element).find('a').click(function() {
        var prefix = $(element).attr('id');
        $('#' + prefix + 'div').toggleClass("closed");
        // other actions
       return false;
    });
});​

http://jsfiddle.net/MtX7p/17/

这是您的完整脚本：http://jsfiddle.net/KMJPf/49/