Oprava JS kódu

Petr

Oprava JS kódu
« kdy: 08. 12. 2017, 17:34:03 »
Ahoj,

poradili by jste jak tohle napsat líp? Nehci psát ke každému odkazu funkci s parametrem.


Kód: [Vybrat]
<a href="#" onclick="myFunction(0)">A</a>
<a href="#" onclick="myFunction(1)">B</a>
<a href="#" onclick="myFunction(2)">C</a>

<div id="result"></div>

<script>

function myFunction(fn){
    $("#result").load(fn+".html");
}

</script>

Potřeboval bych to nějak takto ale nevím co dát místo ? ? ? ? ? ? ? ? ?.

Kód: [Vybrat]
<a href="#">A</a>
<a href="#">B</a>
<a href="#">C</a>

<div id="result"></div>

<script>
    $("#result").on("click", function() {
        $("#result").load(? ? ? ? ? ? ? ? ? + ".html");
    });
</script>

Děkuji za pomoc.


gll

Re:Oprava JS kódu
« Odpověď #1 kdy: 08. 12. 2017, 17:56:34 »
Kód: [Vybrat]
<a href="#">A</a>
<a href="#">B</a>
<a href="#">C</a>

<div id="result"></div>

<script>
    $("a").on("click", function(e) {
        var i = $("a").index(e.target);
        $("#result").load(num + ".html");
    });
</script>

gll

Re:Oprava JS kódu
« Odpověď #2 kdy: 08. 12. 2017, 17:57:32 »
oprava

Kód: [Vybrat]
<a href="#">A</a>
<a href="#">B</a>
<a href="#">C</a>

<div id="result"></div>

<script>
    $("a").on("click", function(e) {
        var i = $("a").index(e.target);
        $("#result").load(i + ".html");
    });
</script>

Petr

Re:Oprava JS kódu
« Odpověď #3 kdy: 08. 12. 2017, 18:01:29 »
Moc děkuji za pomoc. A to se vztahuje na všechny tágy <a> na celé stránce? Pokud ano, šlo by to omezit třeba na konkrétní div? Aby to nehledal jinde na stránce? Děkuji
<div id="menu">
<a href="#">A[/url]
<a href="#">B[/url]
<a href="#">C[/url]
</div>

gll

Re:Oprava JS kódu
« Odpověď #4 kdy: 08. 12. 2017, 18:03:56 »
funguje to s libovolným selektorem.

Kód: [Vybrat]
<script>
    $("#menu a").on("click", function(e) {
        var i = $("#menu a").index(e.target);
        $("#result").load(i + ".html");
    });
</script>


Petr

Re:Oprava JS kódu
« Odpověď #5 kdy: 08. 12. 2017, 18:29:31 »
Funguje to parádně. moc děkuji!

Jen pro zajímavost, pokud použiji jako wrapper html tág bez ID nebo CLASS v tomto případě <navi>, bude celý zápis takto správně?

Kód: [Vybrat]
<navi>
<a href="#">A[/url]
<a href="#">B[/url]
<a href="#">C[/url]
</navi>

<script>
    $("navi a").on("click", function(e) {
        var i = $("#menu a").index(e.target);
        $("#result").load(i + ".html");
    });
</script>

Petr

Re:Oprava JS kódu
« Odpověď #6 kdy: 08. 12. 2017, 18:30:34 »
Oprava:
<nav> ne <navi> ;)

gll

Re:Oprava JS kódu
« Odpověď #7 kdy: 08. 12. 2017, 18:32:50 »
jo to bude fungovat. Libovolny CSS selektor, ktery vyselektuje ty odkazy bude fungovat.

gll

Re:Oprava JS kódu
« Odpověď #8 kdy: 08. 12. 2017, 18:35:00 »
ale musite ho zmenit i v tom druhem vyskytu.

Kód: [Vybrat]
<nav>
<a href="#">A[/url]
<a href="#">B[/url]
<a href="#">C[/url]
</nav>

<script>
    $("nav a").on("click", function(e) {
        var i = $("nav a").index(e.target);
        $("#result").load(i + ".html");
    });
</script>

Petr

Re:Oprava JS kódu
« Odpověď #9 kdy: 08. 12. 2017, 18:51:42 »
Jasně, proto mi to nefungovalo ;-) Děkuji
Teď když to tak zkouším, tak to asi nebude vhodné řešení  :( Nějak jsem si neuvědomil, že když přidám další odkaz mezi třeba A a B tak se čísla změní směrem dolů u všech položek a názvy souborů nebudou sedět k danému odkazu. Neexistuje ještě nějaká možnost jak to jednoduše ošetřit?

gll

Re:Oprava JS kódu
« Odpověď #10 kdy: 08. 12. 2017, 19:08:24 »
Ztráta času. Snad poradí někdo jiný.

BoneFlute

  • *****
  • 1 981
    • Zobrazit profil
Re:Oprava JS kódu
« Odpověď #11 kdy: 12. 12. 2017, 16:55:09 »
Kód: [Vybrat]
<a href="a.html">A</a>
<a href="b.html">B</a>
<a href="c.html">C</a>

<div id="result"></div>

<script>
    $("a").on("click", function() {
        $("#result").load(this.href);
    });
</script>

Když máš víc odkazů, tak je musíš nějak rozlišit. Když je budeš rozlišovat indexem, tak se nediv, že se ti to bude rozbíjet po přidání odkazu na začátek.

Zkus si s tím hrát sám. `console.log()` je tvůj kamarád.