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 Juniormester
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 Juniormester
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





CIO
Årets CIO 2022: Nu skal Danmarks dygtigste CIO findes - er det dig? Eller kender du en, du vil indstille?