Oprava JS kódu

[Petr]

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.

[Reklama]

[gll]

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]

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]

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]

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>


[Reklama]

[Petr]

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]

Oprava:
<nav> ne <navi>

[gll]

jo to bude fungovat. Libovolny CSS selektor, ktery vyselektuje ty odkazy bude fungovat.

[gll]

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]

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]

Ztráta času. Snad poradí někdo jiný.

[BoneFlute]

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.