Working Example

Question

我想要在点击时更改文字。当我点击任何链接时代码工作，但是当我点击另一个链接时，没有任何反应。 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>");
    });
});

Answer 1

   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");
      });
    });

Answer 2

正如我在回答时所指出的，部分问题出在replaceWith。它正在替换整个h3行，因此在第一次单击后没有任何ID。其次，你不必那么多地调用doc.ready。 “一个电话就是全力以赴”。最后，给我们举例说明如何缩短它，也就是说，我可能会这样做：

Working Example

$(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")]);
    })
})

Much Shorter Example!

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

Data Savvy Example

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")); });

Data Savvy Example using Class Name

Answer 3

您正在替换元素，因此下次尝试查询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");
    });
});

Answer 4

.replaceWith（）替换所有元素。当你第一次这样做时，没关系，但第二次你没有什么可以替换的。

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

看看.html（）方法。它仅替换内容。 .html() link to read

Answer 5

更改此

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

进入这个

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

等等......

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

单击链接上的JQuery更改文本

5 个答案:

Working Example

Much Shorter Example!

Data Savvy Example

HTML

JS

Data Savvy Example using Class Name