Question

我对JS / Jquery一般缺乏经验，所以这可能是我想念的简单事情。我试图在页面上隐藏一些文本，然后通过切换链接启用它。这是使用的JS。最重要的是＆＃34; Attendence＆＃34;工作正常，但是＆＃34;描述＆＃34;不隐藏或切换文本。我基本上是从出席时复制/粘贴说明，所以我不确定它为什么不起作用。

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $(".attend_list").hide();
        $(".attend_toggle").click(function()
        {
            $(this).parent().next('.attend_list').toggle();
        });

        $(".description_text").hide();
        $(".description_toggle").click(function()
        {
           $(this).parent().next('.description_text').toggle();
        });
});
</script>

这是为每个人生成的相关HTML。

考勤

<div id="attending10" class="membersAttending">
    <div style="clear: both;"></div>
    <div id="membertoggle10">
        <p class="attend_toggle">
            <a href="#">Toggle Attendance</a>
        </p>
        <div style="clear: both;"></div>
    </div>
    <p class="attend_list">
        test - Yes<br />
    </p>
</div>

描述

<div id="description10" class="description">
    <div style="clear: both;"></div>
    <div id="descriptiontoggle10">
        <p class="description_toggle">
            <a href="#">Description</a>
        </p>
        <div style="clear: both;"></div>
    </div>
    <p class="description_text">
        <p>Test</p>
    </p>
</div>

Answer 1

问题在于你的HTML而不是你的jQuery

您错过了</div>并且段落中有一个段落。

<div id="attending10" class="membersAttending">
    <div style="clear: both;"></div>
    <div id="membertoggle10">
        <p class="attend_toggle">
            <a href="#">Toggle Attendance</a>
        </p>
        <div style="clear: both;"></div>
    </div>
    <p class="attend_list">
        test - Yes<br />
    </p>
</div> <!--- this was missing -->
<div id="description10" class="description">
    <div style="clear: both;"></div>
    <div id="descriptiontoggle10">
        <p class="description_toggle">
            <a href="#">Description</a>
        </p>
        <div style="clear: both;"></div>
    </div>
    <p class="description_text">
        Test <!--- this was a p in a p-->
    </p>
</div>

工作演示http://jsfiddle.net/qLPEw/

另外（不是问题的一部分）如果你创建一个对元素做某事的事件，并且它需要在加载时动作，触发该事件而不是编写更多的jQuery行。

jQuery(document).ready(function($) {
    $(".attend_toggle").click(function(){
        $(this).parent().next('.attend_list').toggle();
    }).click(); // trigger the bound function on load

    $(".description_toggle").click(function(){
       $(this).parent().next('.description_text').toggle();
    }).click(); // trigger the bound function on load
});

但是，如果用户第一次看到页面时隐藏它们，我会用CSS隐藏它们。

jQuery切换在一个实例中工作，但不是另一个实例

1 个答案: