Avatar billede 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.
Avatar billede Obvious94 Novice
06. juni 2021 - 15:51 #1
Bump jeg har brug for det samme!! Eller i hvert fald noget i den dur.
Avatar billede ejvindh Guru
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");
Avatar billede ejvindh Guru
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 :)
Avatar billede ejvindh Guru
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");
Avatar billede 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?
Avatar billede ejvindh Guru
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>
Avatar billede ejvindh Guru
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>
Avatar billede Obvious94 Novice
07. juni 2021 - 10:34 #8
Tak!!
Avatar billede 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.

Loading billede Opret Preview

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





Premium
Dansk booking-portal ramt af ransomware-angreb: Forhandler med hackere om betaling af løsesum
Selskabet Ak Techotel er ramt af et omfattende hackerangreb, der er gået ud over en lang række hoteller i Danmark, Sverige og Norge. Selskabet har forhandlet med hackerne bag angrebet for igen at få adgang til sine systemer igen.
CIO
Der findes ikke noget vigtigere for din virksomhedskultur end psychological safety
Klumme: Forskningen er entydig: Vidensarbejde er mere effektiv, når du tør stille spørgsmål, rejse kritik og indrømme fejl helt uden frygt for at blive straffet eller gjort til grin. Hvis du ikke har fokus på denne del af din virksomhedskultur, så lever din virksomhed og dine medarbejdere ikke op til deres fulde potentiale.
White paper
Er det nu? Eller skal vi vente? Optimér udskiftning af servere i koncernen
Denne analyse giver dig svar på, hvordan du rammer ”the sweet spot”, der sikrer maksimal udnyttelse af eksisterende hardware i koncernens IT-miljø, inden du skifter til nye servere.