1

我希望文本在点击时改变。当我点击任何链接时，代码就可以工作，但是当我点击另一个链接时，什么也没有发生。jquery 对我来说是新的，这就是为什么我为此苦苦挣扎。提前致谢

$(document).ready(function(){
    $("#all-iso").click(function(){
        $("#news-h3-change").replaceWith("<h3>ALLE NEWS</h3>");
    });
});

$(document).ready(function(){
    $("#date-iso").click(function(){
        $("#news-h3-change").replaceWith("<h3>DATUM</h3>");
    });
});

$(document).ready(function(){
    $("#actor-iso").click(function(){
        $("#news-h3-change").replaceWith("<h3>SCHAUSPIELER</h3>");
    });
});

$(document).ready(function(){
    $("#film-iso").click(function(){
        $("#news-h3-change").replaceWith("<h3>FILM</h3>");
    });
});
4

5 回答 5

5 
   var StatusBar;

   $(document).ready(function(){
      StatusBar = $("#news-h3-change");
      $("#all-iso").click(function(){
        StatusBar.html("ALLE NEWS");
      });
      $("#date-iso").click(function(){
        StatusBar.html("DATUM");
      });
      $("#actor-iso").click(function(){
        StatusBar.html("SCHAUSPIELER");
      });
      $("#film-iso").click(function(){
        StatusBar.html("FILM");
      });
    });
于 2013-06-03T21:37:42.200 回答
4

正如我在回答时所指出的那样，您的部分问题在replaceWith. 它正在替换整个 h3 行，因此第一次单击后该 ID 没有任何内容。其次，您不必调用 doc.ready 这么多。“一个电话完成所有工作”。最后，只是给你一个例子，说明如何缩短它，也就是我可能会这样做的方式：

工作示例

$(function() {  //  same as $(document).ready(function() {
    $("#all-iso, #date-iso, #actor-iso, #film-iso").on("click", function(e) {
        var txt = "";
        switch ($(this).prop("id")) {
            case "all-iso":
                txt = "ALLE NEWS";
                break;
            case "date-iso":
                txt = "DATUM";
                break;
            case "actor-iso":
                txt = "SCHAUSPIELER";
                break;
            case "film-iso":
                txt = "FILM";
                break;
        }
        $("#news-h3-change").text(txt);
    })
})

学到更多：

作为替代方案，您可以将文本设置为对象，然后使用“in-array”之类的调用来获取文本。类似于：

var h3Txt = {
    "all-iso": "ALLE NEWS",
    "date-iso": "DATUM",
    "actor-iso": "SCHAUSPIELER",
    "film-iso": "FILM"
}
$(function() {
    $("#all-iso, #date-iso, #actor-iso, #film-iso").on("click", function(e) {
        $("#news-h3-change").text(h3Txt[$(this).prop("id")]);
    })
})

更短的例子！

如果您正在使用现代技术（期望用户拥有 HTML5 浏览器，尽管大多数 HTML4 浏览器都可以处理以下问题），您可以将 text 变量设置为它所属的 HTML 元素的“数据”属性（强烈推荐在今天的市场），从而使您的 JS 更短。

数据精明的例子

HTML

<!--  would be something like the following, make note of data properties -->
<li id="all-iso" data-text="ALLE NEWS">all-iso</li>
<li id="date-iso" data-text="DATUM">date-iso</li>
<li id="actor-iso" data-text="SCHAUSPIELER">actor-iso</li>
<li id="film-iso" data-text="FILM">film-iso</li>

JS

$(function() {
    $("#all-iso, #date-iso, #actor-iso, #film-iso").on("click", function(e) {
        $("#news-h3-change").text($(this).data("text"));
    })
})

并通过在它们之间放置相同的类名然后使用该类名进行选择来使此功能更好。就像是：

<li id="all-iso" data-text="ALLE NEWS" class="text-clickables">all-iso</li>
<li id="date-iso" data-text="DATUM" class="text-clickables">date-iso</li>

然后

$(".text-clickables").on("click", function(e) { $("#news-h3-change").text($(this).data("text")); });

使用类名的数据精明示例

于 2013-06-03T21:49:59.297 回答
2

您正在替换元素，因此下次您尝试查询 ID 为“news-h3-change”的元素时，它不存在。您可能会发现只替换 h3 标记的内部文本更容易。

$(document).ready(function(){
    $("#all-iso").click(function(){
        $("#news-h3-change").text("ALLE NEWS");
    });
    /* ... */
    $("#film-iso").click(function(){
        $("#news-h3-change").text("FILM");
    });
});
于 2013-06-03T21:39:02.820 回答
0

.replaceWith() 替换所有元素。当你第一次这样做时，没关系，但第二次你没有任何东西可以替换。

在第一次替换后，你没有任何 id="news-h3-change" 的元素，它被替换了。

看看 .html() 方法。它仅替换内容。.html() 链接阅读

于 2013-06-03T21:42:50.783 回答
-1

改变这个

$("#date-iso").click(function () {...})

进入这个

$(document).on('click', '#date-iso' function() {...})

等等...

这会将事件侦听器绑定到document实例，而不是绑定到您要替换的对象。

于 2013-06-03T21:39:06.323 回答