jquery - 如何在 jquery 中多次更改文本？

Question

我刚刚进入 jquery，我非常喜欢它。

目前，我正在尝试创建以下看似简单的场景：文本显示在屏幕上，每次单击主要内容时，文本都会淡入淡出到一组不同的文本。

现在，当它从一个文本转换到另一个文本时，我已经能够实现这一点，但由于某种原因，我无法在其中链接任何其他内容。任何提示将不胜感激！

这是HTML：

<div id="mainContent">
    <h3 id="bodyText">This is the original text</h>
</div>

这是脚本：

$(document).ready(function() {
    $('#mainContent').click(function () {
        $('#bodyText').fadeOut(function () {
            $(this).text("This is the new text!").fadeIn();
        });
    });
});

*编辑：

也许“链”不是正确的术语 - 我只是试图允许用户通过单击主屏幕来更改屏幕上的文本一定次数（几乎就像在 powerpoint 中的基本幻灯片中的幻灯片之间导航）内容区。感谢您迄今为止的所有回答和建议，我正在研究如何实施您的解决方案。

Answer 1

在这种情况下，您需要阅读有关事件冒泡的信息，点击事件不会在 DOM 树中冒泡。您必须改用.live()。但在最新版本的 jQuery.live()中已被弃用，因此您必须使用.on()事件。就重复这一点而言，你必须通过这个循环，这可以通过.each()

Answer 2

您可以简单地在单击时添加淡出效果，并使用 $.ajax 从 PHP 页面获取不同的文本并将其显示为淡入效果。

Answer 3

这可能会帮助你

$('#mainContent').unbind('click'); Or you can have livequery() instead.

......................

$(document).ready(function() {
    $('#mainContent').click(function () {
        $('#bodyText').fadeOut(function () {
            $(this).text("This is the new text!").fadeIn();
            $('#mainContent').unbind('click');
            // Or what ever binding you want to add.
        });
    });
});