Avatar
Martin Zeman
Člen
Avatar
Martin Zeman:

Dobrý den,

chtěl bych se ještě zeptat. Je možné vzít všechny elementy co mají třídu "time" vložit je do pole, vyhledat je pomocí ".getElementsBy­ClassName", přidat jim třídu "odd/even" podle toho jestli je sudý nebo lichý. Celé toto provést s cyklem "while" nebo "foreach"? Děkuji za odpověď.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <script>
            function zjistiDatum(dnyNavic) {
                var konecneDatum = new Date();
                konecneDatum.setDate(konecneDatum.getDate() + dnyNavic);
                return konecneDatum.getDate() + '. ' + (konecneDatum.getMonth() + 1) + '. ' + konecneDatum.getFullYear();
            }
            document.write('<div class="time1">Dnes je: ' + zjistiDatum(0) + '</div>');
            document.write('<div class="time2">Zítra bude: ' + zjistiDatum(1) + '</div>');
            document.write('<div class="time3">Pozítří bude: ' + zjistiDatum(2) + '</div>');
        </script>
    </body>
</html>
 
Odpovědět 16. listopadu 16:55
Avatar
Martin Zeman
Člen
Avatar
Martin Zeman:

Ptám se kvůli tomu, protože tohle nejde zobrazit na sraších prohlížečích.

 
Nahoru Odpovědět 16. listopadu 17:11
Avatar
Oxtimus
Člen
Avatar
Odpovídá na Martin Zeman
Oxtimus:

Na toto se nejlépe hodí cyklus for:

/** Tento selektor vybere všechny divy s třídou „time“. */
// var elementy = document.getElementsByClassName('time');

/** Tento selektor vybere všechny divy, jejichž třída začíná na „time“. */
var elementy = document.querySelectorAll('div[class^="time"]');

for(var i = 0, l = elementy.length; i < l; i++) {
   var trida = i % 2 === 0 ? 'even' : 'odd';
   elementy[i].className = elementy[i].className + ' ' + trida;
}
 
Nahoru Odpovědět  +2 16. listopadu 17:22
Avatar
Martin Zeman
Člen
Avatar
Martin Zeman:

Potřeboval bych, aby v souboru:
1.) "index.html" byl řádek, který bude vypadat nějak takto "<div class="time1">Dnes je: ' + zjistiDatum(0) + '</div>"
2.) "style.css"zústalo, tak jak je

div:nth-of-type(even) {
   color: red;
}

div:nth-of-type(odd) {
   color: blue;
}

3.) "skript.js" zde, aby zůstala ta fuknce, kterou tu již mám, ale plus i toto a vše dohromady to fungovalo?

Děkuji za odpověď.
Hlavně bych chtěl poděkovat uživateli Oxtimus, který mi stále odpovídá. :-)

 
Nahoru Odpovědět 17. listopadu 22:47
Avatar
Oxtimus
Člen
Avatar
Odpovídá na Martin Zeman
Oxtimus:

Podle toho, jak to popisuješ, by to mohlo vypadat třeba takto (živá ukázka)

index.html
Je důležité nezapomenout nalinkovat externí soubory css a js.

...
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
...
<div class="time1">Dnes je: </div>
<div class="time2">Zítra bude: </div>
<div class="time3">Pozítří bude: </div>
...

style.css
Jak píšeš podobu css souboru, pak to funguje i bez JavaScriptu (jen jsem nezjišťoval, na jak starých prohlížečích). JavaScript s :nth-of-child vůbec nepracuje, ten jenom přiřadí třídy .even a .odd, které je třeba také nastylovat.

div:nth-of-type(even), .even {
   color: red;
}

div:nth-of-type(odd), .odd {
   color: blue;
}

script.js
Funkce vypisData a obarviData by klidně mohly být spojené v jednu, protože se procházejí stejné prvky tím stejným cyklem. Já je pro jednoduchost ale rozdělil.

window.onload = function() {
   vypisData(); // Zde se celý proces vypsání dat spustí.
   obarviData(); // Zde se spustí proces obarvení sudých a lichých dat.
}

/**
* Najde všechny <div> s třídou začínající na „time“ a doplní do nich příslušný datum.
*/
function vypisData() {
   var elementy = document.querySelectorAll('div[class^=time]');
   for(var i = 0, l = elementy.length; i < l; i++) {
      elementy[i].innerHTML += zjistiDatum(i);
   }
}

/**
* Vrátí datum za několik dní dle parametru dnyNavic.
* @param {Number} dnyNavic Počet dní, které se připočtou k aktuálnímu datu.
* @returns {String} Výsledný datum ve formátu DD. MM. YYYY.
*/
function zjistiDatum(dnyNavic) {
   var konecneDatum = new Date();
   konecneDatum.setDate(konecneDatum.getDate() + dnyNavic);
   return konecneDatum.getDate() + '. ' + (konecneDatum.getMonth() + 1) + '. ' + konecneDatum.getFullYear();
}

/**
* Najde všechny <div> s třídou začínající na „time“ a přidá jim CSS třídu podle toho, zda jsou liché nebo sudé.
*/
function obarviData() {
   var elementy = document.querySelectorAll('div[class^=time]');
   for(var i = 0, l = elementy.length; i < l; i++) {
     var trida = i % 2 === 0 ? 'odd' : 'even';
     elementy[i].className = elementy[i].className + ' ' + trida;
   }
}
 
Nahoru Odpovědět  +1 18. listopadu 12:36
Avatar
Martin Zeman
Člen
Avatar
Martin Zeman:

Tak já jsem to nakonec vyřešil následovně:

"scripts.js"

 window.onload = function() {
    var elements = document.getElementsByClassName("time");
    console.log(elements.length);

    for (var i = 0, l = elements.length; i < l; i++) {
       var trida = i % 2 === 0 ? 'even' : 'odd';
       elements[i].className = elements[i].className + ' ' + trida;

       elements[i].innerHTML = elements[i].innerHTML + findDate(i);
    }

    function findDate(days) {
           var date = new Date();
           date.setDate(date.getDate() + days);
           var result = date.getDate() + '. ' + (date.getMonth() + 1) + '. ' + date.getFullYear();
               console.log(result);
           return result;
        }
};

"index.html"

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script language="javascripts" type="text/javascript" src="scripts.js"></script>
    </head>
    <body>
        <div class="time">Dnes je: </div>
        <div class="time">Zítra bude: </div>
        <div class="time">Pozítří bude: </div>
    </body>
</html>

"style.css"

.even {
   color: red;
}

.odd {
   color: blue;
}
 
Nahoru Odpovědět 18. listopadu 12:37
Avatar
Martin Zeman
Člen
Avatar
Martin Zeman:

Víš jak tohle samé udělat v "php"?

 
Nahoru Odpovědět 18. listopadu 12:39
Avatar
Oxtimus
Člen
Avatar
Odpovídá na Martin Zeman
Oxtimus:

To vlastně nebude nic jiného:

index.php:

<?php
function zjistiDatum($dniNavic) {
   return date('d. m. Y', strtotime('+' . $dniNavic . ' days'));
}

$hlasky = ['Dnes je:', 'Zítra bude:', 'Pozítří bude:'];

for($i = 0, $l = count($hlasky); $i < $l; $i++) {
   $trida = $i % 2 === 0 ? 'even' : 'odd';
   echo '<div class="' . $trida . '">' . $hlasky[$i] . ' ' . zjistiDatum($i) . '</div>';
}
?>
Editováno 18. listopadu 12:54
Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
 
Nahoru Odpovědět 18. listopadu 12:54
Avatar
Martin Zeman
Člen
Avatar
Martin Zeman:

To je jen takhle krátký? Hm, tak to je paráda díky.

 
Nahoru Odpovědět 18. listopadu 13:01
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 9 zpráv z 9.