JQuery Змена тэксту на клік Спасылка

Я хачу, каб тэкст, каб змяніць па пстрычцы. код працуе, калі я націскаю на любую спасылку, але як толькі я націскаю яшчэ адзін, нічога не адбываецца. jQuery з'яўляецца новым для мяне вось чаму ім змагацца з гэтым. загадзя дзякую

$(document).ready(function(){
    $("#all-iso").click(function(){
        $("#news-h3-change").replaceWith("

ALLE NEWS

");
    });
});

$(document).ready(function(){
    $("#date-iso").click(function(){
        $("#news-h3-change").replaceWith("

DATUM

");
    });
});

$(document).ready(function(){
    $("#actor-iso").click(function(){
        $("#news-h3-change").replaceWith("

SCHAUSPIELER

");
    });
});

$(document).ready(function(){
    $("#film-iso").click(function(){
        $("#news-h3-change").replaceWith("

FILM

");
    });
});
1
Прычына, па якой нічога не адбываецца, таму што вы замяняе # Навіны-h3-змены , такім чынам, выдаляючы яго з DOM.
дададзена аўтар Spokey, крыніца
Прычына, па якой нічога не адбываецца, таму што вы замяняе # Навіны-h3-змены , такім чынам, выдаляючы яго з DOM.
дададзена аўтар Spokey, крыніца
(1) Вам трэба ўсяго толькі адзін $ (дакумент) .ready (), а ўсе астатнія коды павінны быць у гэтай функцыі; (2) З дапамогай .html() замест .replaceWith (). См адказ Дэвіда Яши ў ніжэй - ён мае рацыю.
дададзена аўтар gibberish, крыніца
(1) Вам трэба ўсяго толькі адзін $ (дакумент) .ready (), а ўсе астатнія коды павінны быць у гэтай функцыі; (2) З дапамогай .html() замест .replaceWith (). См адказ Дэвіда Яши ў ніжэй - ён мае рацыю.
дададзена аўтар gibberish, крыніца
вам не патрэбныя ўсе гэтыя $ (дакумент) .ready (функцыя() { толькі адзін
дададзена аўтар Abraham Uribe, крыніца
вам не патрэбныя ўсе гэтыя $ (дакумент) .ready (функцыя() { толькі адзін
дададзена аўтар Abraham Uribe, крыніца
мы павінны былі б убачыць адпаведны HTML. Вы, хутчэй за ўсё, выдаленне ідэнтыфікатараў, якія выкарыстоўваюцца ў якасці селектараў.
дададзена аўтар ethorn10, крыніца
мы павінны былі б убачыць адпаведны HTML. Вы, хутчэй за ўсё, выдаленне ідэнтыфікатараў, якія выкарыстоўваюцца ў якасці селектараў.
дададзена аўтар ethorn10, крыніца

9 адказы

   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");
      });
    });
5
дададзена
@DavidJashi: паверце, я ведаю аб праблемах працэсара. У адрозненні ад шматлікіх тут, я да гэтага часу памятаю праграмаванне ў DOS і COBOL нават!
дададзена аўтар SpYk3HH, крыніца
@DavidJashi: Вы прапаведуеце хору, bruddah. Мой першы «вялікі» гіг праектаваў, ад матэрыялу нуля нават, карыстацкі сэнсарны экран ПК падлучаны да WiFi карыстацкіх відэарэгістратараў для праваахоўных транспартных сродкаў. Гэта было ў '06. Нават тады я не стаў з памерам файла JS, пакуль агульныя калектыўным для кожнай старонкі, загружанай з такім было менш 1Мб. Гэта на самай справе не складана зрабіць. Дык усё ж, мой пункт варта. Тэхналогій тады не было, дзе побач, што яна з'яўляецца сёння. І калі я магу зрабіць гэта на простых машынах пры нізкіх канчатковых цэнах на ЦАЛКАМ карыстацкіх машынах 7 гадоў таму, вы можаце зрабіць гэта сёння.
дададзена аўтар SpYk3HH, крыніца
LoL @Tamlyn ў сучасным свеце, калі аб'явіць зменную эканоміць час ... вы б не заўважылі. Большасць ўсіх сістэм сёння, нават танны Уолі-World ПК мае дастатковую магутнасць, каб загрузіць нават цэлы Meg дадзеных JS няма часу плоскага, і я думаю, што хуткасць DSL з'яўляецца мінімальным стандартам у цяперашні час. Хутчэй за ўсё, у вас ёсць, каб задаволіць кагосьці працуе так павольна, вы павінны выкарыстоўваць гэтыя старыя зэканоміць час менш чым на 1%. Накшталт як класці ўсе JS у ніжняй частцы, гэта проста выходзяць з моды. Добры савет для чысціні, хоць я мяркую. Хоць я нічога не падабаецца ў глабальным, я б сказаў, што паклаў яго ў пэўным прасторы імёнаў Object. толькі я.
дададзена аўтар SpYk3HH, крыніца
Вы можаце кэшаваць $ ( «# навіны-h3-змяненне») у зменную - так што гэта будзе дзейнічаць трохі хутчэй (менш DOM праходзіць кожны раз)
дададзена аўтар codename-, крыніца
Ён нават не трэба быць глабальнай зменнай. Толькі абвешчаны ў гатовы функцыі.
дададзена аўтар codename-, крыніца
@Tamlyn: Назавіце гэта дрэнная звычка, але мне падабаецца кэшуюцца Вар быць даступныя з іншых функцый таксама.
дададзена аўтар David Jashi, крыніца
@ SpYk3HH Я прывык эканоміць кожны байт і CPU цыклу, так як большая частка майго кода прызначаны для працы на нізкай магутнасці і павольных прыстаўках.
дададзена аўтар David Jashi, крыніца
@Tamlyn: досыць разумны, дзякуй.
дададзена аўтар David Jashi, крыніца
На жаль, забыўся выдаліць укладзеную Н3-е
дададзена аўтар David Jashi, крыніца
дзякуй, хлопцы ... гэта сапраўды дапамагло мне
дададзена аўтар Jobes, крыніца
   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");
      });
    });
5
дададзена
@DavidJashi: паверце, я ведаю аб праблемах працэсара. У адрозненні ад шматлікіх тут, я да гэтага часу памятаю праграмаванне ў DOS і COBOL нават!
дададзена аўтар SpYk3HH, крыніца
@DavidJashi: Вы прапаведуеце хору, bruddah. Мой першы «вялікі» гіг праектаваў, ад матэрыялу нуля нават, карыстацкі сэнсарны экран ПК падлучаны да WiFi карыстацкіх відэарэгістратараў для праваахоўных транспартных сродкаў. Гэта было ў '06. Нават тады я не стаў з памерам файла JS, пакуль агульныя калектыўным для кожнай старонкі, загружанай з такім было менш 1Мб. Гэта на самай справе не складана зрабіць. Дык усё ж, мой пункт варта. Тэхналогій тады не было, дзе побач, што яна з'яўляецца сёння. І калі я магу зрабіць гэта на простых машынах пры нізкіх канчатковых цэнах на ЦАЛКАМ карыстацкіх машынах 7 гадоў таму, вы можаце зрабіць гэта сёння.
дададзена аўтар SpYk3HH, крыніца
LoL @Tamlyn ў сучасным свеце, калі аб'явіць зменную эканоміць час ... вы б не заўважылі. Большасць ўсіх сістэм сёння, нават танны Уолі-World ПК мае дастатковую магутнасць, каб загрузіць нават цэлы Meg дадзеных JS няма часу плоскага, і я думаю, што хуткасць DSL з'яўляецца мінімальным стандартам у цяперашні час. Хутчэй за ўсё, у вас ёсць, каб задаволіць кагосьці працуе так павольна, вы павінны выкарыстоўваць гэтыя старыя зэканоміць час менш чым на 1%. Накшталт як класці ўсе JS у ніжняй частцы, гэта проста выходзяць з моды. Добры савет для чысціні, хоць я мяркую. Хоць я нічога не падабаецца ў глабальным, я б сказаў, што паклаў яго ў пэўным прасторы імёнаў Object. толькі я.
дададзена аўтар SpYk3HH, крыніца
Вы можаце кэшаваць $ ( «# навіны-h3-змяненне») у зменную - так што гэта будзе дзейнічаць трохі хутчэй (менш DOM праходзіць кожны раз)
дададзена аўтар codename-, крыніца
Ён нават не трэба быць глабальнай зменнай. Толькі абвешчаны ў гатовы функцыі.
дададзена аўтар codename-, крыніца
@ SpYk3HH Я прывык эканоміць кожны байт і CPU цыклу, так як большая частка майго кода прызначаны для працы на нізкай магутнасці і павольных прыстаўках.
дададзена аўтар David Jashi, крыніца
@Tamlyn: Назавіце гэта дрэнная звычка, але мне падабаецца кэшуюцца Вар быць даступныя з іншых функцый таксама.
дададзена аўтар David Jashi, крыніца
@Tamlyn: досыць разумны, дзякуй.
дададзена аўтар David Jashi, крыніца
На жаль, забыўся выдаліць укладзеную Н3-е
дададзена аўтар David Jashi, крыніца
дзякуй, хлопцы ... гэта сапраўды дапамагло мне
дададзена аўтар Jobes, крыніца

Як я бачыў, адзначыў, адказваючы, частка вашай праблемы ў ReplaceWith . Гэта мяняе ўсю h3 лініі, такім чынам, няма нічога з гэтым ідэнтыфікатарам пасля першага пстрычкі. Па-другое, вы не павінны выклікаць 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);
    })
})

Чытаць далей:


У якасці альтэрнатывы, вы можаце ўсталяваць тэкст у аб'ект, а затым выкарыстоўваць «в-масіў», як выклік, каб атрымаць тэкст. Soemthing як:

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 браўзэраў будуць апрацоўваць наступны штраф), вы можаце ўсталяваць пераменны тэкст у якасці «дадзеных» ўласцівасці HTML элемента ён належыць таксама (вельмі рэкамендуюцца ў сёння на рынку), такім чынам, робячы вашы JS яшчэ карацей.

Дадзеныя Дасведчаны Прыклад

HTML

<!--  would be something like the following, make note of data properties -->
  • all-iso
  • 
    
  • date-iso
  • 
    
  • actor-iso
  • 
    
  • film-iso
  • 
    

    JS

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

    And make this function even better by putting a same class name between them and то using that class name to make selection. Something like:

  • all-iso
  • 
    
  • date-iso
  • 
    

    то

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

    Дадзеныя Прыкладу хто водзіцца выкарыстання Імя класа

    4
    дададзена

    Як я бачыў, адзначыў, адказваючы, частка вашай праблемы ў ReplaceWith . Гэта мяняе ўсю h3 лініі, такім чынам, няма нічога з гэтым ідэнтыфікатарам пасля першага пстрычкі. Па-другое, вы не павінны выклікаць 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);
        })
    })
    

    Чытаць далей:


    У якасці альтэрнатывы, вы можаце ўсталяваць тэкст у аб'ект, а затым выкарыстоўваць «в-масіў», як выклік, каб атрымаць тэкст. Soemthing як:

    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 браўзэраў будуць апрацоўваць наступны штраф), вы можаце ўсталяваць пераменны тэкст у якасці «дадзеных» ўласцівасці HTML элемента ён належыць таксама (вельмі рэкамендуюцца ў сёння на рынку), такім чынам, робячы вашы JS яшчэ карацей.

    Дадзеныя Дасведчаны Прыклад

    HTML

    <!--  would be something like the following, make note of data properties -->
    
  • all-iso
  • 
    
  • date-iso
  • 
    
  • actor-iso
  • 
    
  • film-iso
  • 
    

    JS

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

    And make this function even better by putting a same class name between them and то using that class name to make selection. Something like:

  • all-iso
  • 
    
  • date-iso
  • 
    

    то

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

    Дадзеныя Прыкладу хто водзіцца выкарыстання Імя класа

    4
    дададзена

    Вы замяняе элемент, таму ў наступны раз, калі вы спрабуеце запытаць элемент з ідэнтыфікатарам «Навіны-h3-змены» не існуе. Вы, верагодна, будзе прасцей проста замяніць ўнутраны тэкст h3 тэга.

    $(document).ready(function(){
        $("#all-iso").click(function(){
            $("#news-h3-change").text("ALLE NEWS");
        });
        /* ... */
        $("#film-iso").click(function(){
            $("#news-h3-change").text("FILM");
        });
    });
    
    2
    дададзена

    змяненне гэтага

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

    у гэтым

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

    І гэтак далей...

    Гэта будзе звязваць слухач падзей для дакумент Напрыклад, замест аб'екта, які вы замяняе.

    1
    дададзена

    змяненне гэтага

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

    у гэтым

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

    І гэтак далей...

    Гэта будзе звязваць слухач падзей для дакумент Напрыклад, замест аб'екта, які вы замяняе.

    1
    дададзена

    .replaceWith() замяняе ўвесь элемент. Калі вы робіце гэта ў першы раз, гэта нармальна, але другі раз, калі вы проста не маеце нічога наўзамен.

    Пасля першай замены не маюць якога-небудзь элемента з ідэнтыфікатарам = «Навіны-h3-змены», ён быў заменены.

    Take a look at .html() method. It replaces only the content. .html() link to read

    0
    дададзена

    .replaceWith() замяняе ўвесь элемент. Калі вы робіце гэта ў першы раз, гэта нармальна, але другі раз, калі вы проста не маеце нічога наўзамен.

    Пасля першай замены не маюць якога-небудзь элемента з ідэнтыфікатарам = «Навіны-h3-змены», ён быў заменены.

    Take a look at .html() method. It replaces only the content. .html() link to read

    0
    дададзена