Question

我已经让这段代码正常工作了。它会隐藏某个类的<p>个标记中的所有标记，然后在单击时旋转到下一个标记。我希望它在到达最后一个<p>标签时重置，并再次显示第一个，但事实并非如此。我究竟做错了什么？

这是javascript代码：

$(document).ready(function() {
var curPoem=1;

if ($("h2.title").length==1) { break; }
else { $("h2.title").eq(0).after("\<sup\>\<small style='font-size: 10px; margin: 0 10px; float: right; position: relative; right: 50px; bottom: 30px;' \>Click the title to change the poem\<\/small\>\<\/sup>") }

$("p.lit").not($("p.lit:eq(0)")).hide();
$("p.lit").eq(0).show();
$("h2.title").not($("h2.title:eq(0)")).hide();

$("h2.title").eq(0).bind("click", function()
    {   $("p.lit").not($("p.lit:eq("+curPoem+")")).hide();
        $("p.lit").eq(curPoem).show();

        $("h2.title").eq(0).empty();
        for (i=0; i<$("h2.title").length-1; i++)
        {   $("h2.title").eq(0).append(litTitle[curPoem]);
        }
        document.title=litTitle[curPoem]+" by "+author;

        if (curPoem<$("h2.title").length)
        {   curPoem=(curPoem+1);
        }
        else if (curPoem==$("h2.title").length)
        {   curPoem=1;
        }
    });
});

HTML It act on：

<script type="text/javascript">
        var author="Bud Robert Berkich";
        var litTitle=["In the End", "Rental Car"];
    </script>

<div id="content">
        <h2 class="title">In the End</h2>
        <h3 class="author">Bud Robert Berkich</h3>
        <hr />
        <p class="lit">
            your other  for another for yourself    and not for me  selfish<br />
            <br />
            that other  indifferent not for you and now not for me too<br />
            <br />
            never   for me  but I never I othered   another selfless<br />
            <br />
            (I othered  the same    for you)<br />
            <br />
            and now nothing<br />
            <br />
            in the end  nothing<br />
        </p>
        <h2 class="title">Rental Car</h2>
        <p class="lit">
            4 AM.<br />
            <br />
            I find myself<br />
            in the vicinity<br />
            of the lake<br />
            that five years before<br />
            witnessed<br />
            "the fishing trip from hell."<br />
            <br />
            For me,<br />
            the beginning of the end.<br />
            <br />
            And I'm aware<br />
            of the fact<br />
            that if I'm<br />
            in the middle<br />
            of no front and back,<br />
            <br />
            I can easily<br />
            slip up a non-gated<br />
            park entrance<br />
            unawares.  But<br />
            <br />
            as the darkness<br />
            pushes in<br />
            and the insects<br />
            mock me<br />
            from behind trees<br />
            I can't see,<br />
            a feeling<br />
            <br />
            hell will be paid.<br />
            <br />
            I leave.
        </p>
        <hr />
        <p class="lit_bio">
            Bud Robert Berkich was born in Somerville, New Jersey and raised in Bound Brook, New Jersey.  He is a graduate of Bound Brook High School.  Bud holds an Associate of Arts in Humanities degree from Raritan Valley Community College and a Bachelor of Arts in Liberal Studies degree from Rider University.  He has been writing creatively since the age of eight.  He has had poetry published in The Idiom and a one-act play entitled End Streetpublished in The Rockhurst Review.  Bud is the co-founder and Director of the Somerset Poetry Group in Bridgewater, New Jersey.  He currently lives in Manville, New Jersey.
        </p>
    </div>

Answer 1

这不是一个完整的例子，但我抓住了你的代码并尝试了它并得到了这个：

enter image description here

我用“返回”替换了“break”并更正了该错误。

另外：我认为修改curPoem索引的逻辑有点偏差。它从1开始，到2，然后停留在那里。您需要旋转回零。这是我用过的：

if (curPoem<$("h2.title").length)
{
    curPoem++;
}
if (curPoem==$("h2.title").length)
{
    curPoem=0;
}

ps：您可以使用jsbin.com上传和测试并共享启用Jquery的html页面。

这是你诗歌的一个有效例子：http://jsbin.com/otamu5

jQuery：旋转<p>，隐藏除了一个之外的所有内容。然后重复</p>

1 个答案: