CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

Kast20 Seniormester

05. juni 2021 - 16:03 Der er 7 kommentarer og
1 løsning

Skift text i et DIV tags

Hej,

Jeg har et system hvor jeg simpelhen ikke kan få lov at ændre teksten i 2 <div> tags. Derfor kunne jeg godt tænke mig et jquery script, der automatisk leder efter en tekststreng på siden og erstatter den. Mere konkret så vil jeg gerne have at disse tekststrenge udskiftes fra/til:

Levering > Detaljer
Kvittering > Gennemført

HTML:

<div class="bookly-progress-tracker bookly-table">
<div>1. Produkt <div class="step"></div></div>
<div>2. Tidspunkt <div class="step"></div></div>
<div>3. Levering <div class="step"></div></div>
<div>4. Kvittering <div class="step"></div></div>
</div>

Jeg har forsøgt at gøre dette med følgende script men teksten opdaterer ikke så der er formentlig en eller flere fejl:

Script:

$(document).ready(function(){
$('.bookly-progress-tracker.bookly-table div:nth-of-type(3)').text('Detaljer');
$('.bookly-progress-tracker.bookly-table div:nth-of-type(4)').text('Gennemført');
});

Håber der er en som kan hjælpe med en løsning.

Synes godt om

Obvious94 Juniormester

06. juni 2021 - 15:51 #1

Bump jeg har brug for det samme!! Eller i hvert fald noget i den dur.

Synes godt om

ejvindh Ekspert

06. juni 2021 - 15:59 #2

Det bliver ganske kompliceret, når du vil udskifte en delmængde af en div. Det ville blive meget nemmere, hvis du omkransede det ønskede sted med sin egen div.

Hvis du fx kunne ændre din html-kode til:
<div>1. <span>Produkt</span> <div class="step"></div></div>
<div>2. <span>Tidspunkt</span> <div class="step"></div></div>
<div>3. <span>Levering</span> <div class="step"></div></div>
<div>4. <span>Kvittering</span> <div class="step"></div></div>

Så ville du kunne lave en javascript (beklager, jeg er ikke stiv i jquery, men du kan sikkert selv ændre det):
function change(str) {
var divs = document.getElementsByTagName("span");
for(var i = 0; i < divs.length; i++){
console.log(divs[i].innerHTML);
if (divs[i].innerHTML == str) {
divs[i].innerHTML = "something new...";
}
}
}

change("Levering", "Detaljer");
change("Kvittering", "Gennemført");

Synes godt om

ejvindh Ekspert

06. juni 2021 - 16:00 #3

"hvis du omkransede det ønskede sted med sin egen div"
...som du vil kunne se, ændrede jeg det til at være en <span>, for at undgå uønskede linjeskift :)

Synes godt om

ejvindh Ekspert

06. juni 2021 - 16:12 #4

Nå, jeg kom lige i tanker om, at det som regel er indersiden af hovedet, man skal bruge, når man tænker. Det behøver såmænd ikke være så kompliceret -- heller ikke med den oprindelige html:

<div>1. Produkt <div class="step"></div></div>
<div>2. Tidspunkt <div class="step"></div></div>
<div>3. Levering <div class="step"></div></div>
<div>4. Kvittering <div class="step"></div></div>

Du kan gøre det således (stadigvæk ren javascritpt...):

function change(str, newstr) {
var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++){
divStr = divs[i].innerHTML;
if (divStr.search(str) > -1) {
divs[i].innerHTML = divs[i].innerHTML.replace(str, newstr);
}
}
}

change("Levering", "Detaljer");
change("Kvittering", "Gennemført");

Synes godt om

Kast20 Seniormester

06. juni 2021 - 22:45 #5

Hej ejvindh,

Tak for svaret. :-)

Jeg har sat ovenstående ind i min script fil men værdierne i de 2 DIV tags opdaterer desværre ikke. Skal der noget udenom funktionen for at den eksekverer automatisk når siden loader?

Synes godt om

ejvindh Ekspert

07. juni 2021 - 08:15 #6

Ja, altså det skal jo ind i et <script></script> tag -- ligesom også jquery-koden. Fx således:

<!DOCTYPE html>
<html>
<body>
<div>1. Produkt <div class="step"></div></div>
<div>2. Tidspunkt <div class="step"></div></div>
<div>3. Levering <div class="step"></div></div>
<div>4. Kvittering <div class="step"></div></div>
<script>

function change(str, newstr) {
var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++){
divStr = divs[i].innerHTML;
if (divStr.search(str) > -1) {
divs[i].innerHTML = divs[i].innerHTML.replace(str, newstr);
}
}
}

change("Levering", "Detaljer");
change("Kvittering", "Gennemført");

</script>

</body>
</html>

Synes godt om

ejvindh Ekspert

07. juni 2021 - 08:17 #7

Hmmm ser lige, at koden kan strammes lidt op:

<!DOCTYPE html>
<html>
<body>
<div>1. Produkt <div class="step"></div></div>
<div>2. Tidspunkt <div class="step"></div></div>
<div>3. Levering <div class="step"></div></div>
<div>4. Kvittering <div class="step"></div></div>
<script>
function change(str, newstr) {
var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++){
divs[i].innerHTML = divs[i].innerHTML.replace(str, newstr);
}
}
change("Levering", "Detaljer");
change("Kvittering", "Gennemført");
</script>
</body>
</html>

Synes godt om

Obvious94 Juniormester

07. juni 2021 - 10:34 #8

Tak!!

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript	4	21/05/202417:19	22/06/202422:07
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS