getelement by src?

[syuam]

hey leute hier mein bisheriger code:

<script>
function changecolor(img)
{
    var images = document.getElementsByTagName("img");
    for(var i=0,j=images.length; i<j; i++)
    {
        images[i].style.borderColor="#000";
    }
    img.style.borderColor="#F00";
    //Operate on img location as before
    document.getElementById('hiddenSrc').value = img.src; //das value wird immer verschickt
    document.getElementById('number').value = img.name // das value wird immer verschickt
}
</script>

<td><img src="path-1" name="zahl.2" /></td> <td><img src="path-2" name="zahl.3" /></td>

<input type="hidden" id="hiddenSrc" name="input_name" value="str" />
<input type="hidden" id="number" name="nummer" value="nummerWert" />

folgendes passiert hier:
Es werden zwei Bilder dargestellt.
Klickt man auf eines dieser Bilder, so wird sowohl "src", als auch "name" in einem input-hidden-Feld abgespeichert.
Es ist immer nur ein Bild anklickbar.
Wo ich nun nicht weiterkomme:
Ich möchte, dass die Werte nur dann abgespeichert werden, wenn der "src"-tag des angeklickten des Bildes="path-2" ist.
Nur weiß ich nicht wie ich da mit javascript/jquery vorgehen soll.
Kann da jemand helfen?
lg

 

[scbawik]

Vielleicht verstehe ich dich falsch, denn meine Lösung liegt auf der Hand:

if(img.src == 'path-2') {
    document.getElementById('hiddenSrc').value = img.src; //das value wird immer verschickt
    document.getElementById('number').value = img.name // das value wird immer verschickt
}

 

[syuam]

hatte ein kleines codestück vergessen, das onclick-event hier nochmal alles:

function changecolor(img)
{
    var images = document.getElementsByTagName("img");
    for(var i=0,j=images.length; i<j; i++)
    {
        images[i].style.borderColor="#000";
    }
    if(img.src == 'path-1') {
        img.style.borderColor="#F00";
    }
    if(img.src == 'path-1') {
        document.getElementById('hiddenSrc').value = img.src; //das value wird immer verschickt
        document.getElementById('number').value = img.name // das value wird immer verschickt
    }
}

<td><img src="path-1" onclick="changecolor(this)" name="zahl.2" /></td> <td><img src="path-2" onclick="changecolor(this)" name="zahl.3" /></td>

<input type="hidden" id="hiddenSrc" name="input_name" value="str" />
<input type="hidden" id="number" name="nummer" value="nummerWert" />

nun sollte doch:
1. Der Rahmen des angeklickten Bildes nur markiert werden wenn die if-Bedingung zutrifft oder?
wird er nämlich nicht..wieso?

 

[Sempervivum]

Hallo Syuam,
ich stand mal vor einem ähnlichen Problem und habe festgestellt, dass das src-Attribut die vollständige URL des Bildes liefert. Sieh es dir mal an, entweder mit einem alert oder mit Firebug. Wenn dem so ist, musst Du die Prüfung auf eine Regular Expression mit match() machen:
http://de.selfhtml.org/javascript/objekte/string.htm#match

 

[syuam]

ja aber darum geht es primär nicht..es geht nur um die if-Bedingung in meiner js-Funktion:
Das Bild darf nur markiert werden, wenn die Bedingung zutrifft.
Wieso klappt das nicht?
edit:"path-1" wäre dann die vollständige url
lg

 

[Sempervivum]

"path-1" wäre dann die vollständige url

Nein, die vollständige URL, die img.src liefert, wäre "http://deinedomain.de/deinpfad/path-1". Der Browser ergänzt das. Wenn Du das mit 'path-1' vergleichst, ist das Ergebnis negativ.

 

[syuam]

ok und wie kann ich dann nur "path-1" auslesen lassen?

 

[syuam]

danke habs nun gelöst... :)

 

[Tronjer]

Entweder Regex oder den Wert mit substr() extrahieren.

Ich würde aber einen anderen Ansatz bevorzugen. Wenn man die Bildnamen (path-1, path-2, path-3, ...), in einem Array speichert, dann lässt sich mittels foreach-Schleife in PHP der gesamte HTML-Code, incl. der Image-Attribute src und alt erzeugen. Dabei kann man gleich noch ein data-Attribut übergeben und muss den Wert anschließend nicht mehr extrahieren.

<img src="pfadZumBild/path-1.png" alt="path-1-image" data-irgendwas="path-1"/>

if ( $(this).attr('data-irgendwas') == 'path-1' ) {
  // tu was
}

Und bei der Gelegenheit würde ich gleich das Inline-JS löschen. Das ist mindestens so schlimm wie Tabellenlayout.

So etwas geht gar nicht:

<img src="path-1" onclick="changecolor(this)" />

 

[syuam]

hab einfach aus "path-1" eine ganze url gemacht.
Dann war die Bedingung positiv und es lief.
Warum darf man kein Inline-JS haben?
lg

 

[Tronjer]

hab einfach aus "path-1" eine ganze url gemacht.
Dann war die Bedingung positiv und es lief.
Warum darf man kein Inline-JS haben?
lg

Aus dem selben Grunde aus dem man HTML-Tags wie <center> abgeschafft hat und CSS-Anweisungen in Stylesheets auslagert. Inhalten, Verhalten und Präsentation einer Webseite sollten grundsätzlich getrennt sein.

Neben den Konventionen hat es aber auch noch praktische Gründe. Erst mal ist reines HTML besser zu lesen und außerdem erspart man sich viel Arbeit, wenn man nicht in jedes einzelne Element onclick() schreiben muss, sondern für alle Elemente einen gemeinsamen Eventlistener anlegt.

$(alleMeineImageTags).on('click', function() {
  // tu was
})

 

[syuam]

außerdem erspart man sich viel Arbeit, wenn man nicht in jedes einzelne Element onclick() schreiben muss

die html-tags werden über eine php-Schleife generiert, von daher ist es nicht so viel Arbeit.

 

[Asterixus]

Inline-JavaScript sollte man niemals verwenden. Verdammt, scheiß doch mal ausnahmsweise nicht auf Ratschläge, die man dir gibt.

 

[Tronjer]

Ok, dann war es in diesem Fall keine zusätzliche Arbeit. Aber moderne Webseiten basieren in der Regel auf einem MVC-Framework, das alle Dateien gemäß vorgegebener Konventionen in einer festgelegten Dateistruktur speichert, und zumeist sind auch mehrere Personen an einem solchen Projekt beteiligt. Wenn der JavaScript-Entwickler die zentrale JS-Datei bearbeitet und sein Code keine Auswirkungen zeigt oder Fehler produziert, weil in irgendeinem View Inline-JavaScript steht, dann bedeutet das zusätzlichen und unnötigen Aufwand beim debuggen.

Auch wenn das für deine aktuellen Seite vielleicht nicht relevant ist, solltest du dir trotzdem von Beginn an einen vernünftigen Stil zulegen. Schlechte Gewohnheiten sind später schwer abzulegen. ;)

 

[syuam]

achso ok alles klar danke, hab verstanden :)
also soll ich die javascript-eventhandler in den html-tags, die in der php-Schleife generiert werden, einfach weglassen und im "head" per jQuery festlegen, dass:

$(alleMeineImageTags).on('click', function() {   // tu was }

ja?

 

[scbawik]

Ja, wenn du das allerdings im <head> machst, musst du erst warten bis das Document "ready" ist. Also entweder du machst das erst am Ende vom <body> oder du "wartest" folgendermaßen im <head>:

$(document).ready(function () {
    $('img').on(...);
});