JavaScript jquery wann und wie id und class zusammen verwenden?

[chrisi01]

hi

2 Beispiele welches ist besser?

<div id="klick" class="1">Link 1</div>
<div id="klick" class="2">Link 2</div>
<div id="klick" class="3">Link 3</div>

<script>
$("#klick").click(
function () 
{   
  $.ajax(
  {
    type: "POST",
    url: "test.php",
    data: "&link="+this.class,
    success: function(msg)
    {
      tue_irgendwas();  
    }
  });
}
);
</script>

oder:

<div class="klick" id="1">Link 1</div>
<div class="klick" id="2">Link 2</div>
<div class="klick" id="3">Link 3</div>

<script>
$(".klick").click(
function () 
{   
  $.ajax(
  {
    type: "POST",
    url: "test.php",
    data: "&link="+this.id,
    success: function(msg)
    {
      tue_irgendwas();  
    }
  });
}
);
</script>

Oder sind gar beide Mist und ich sollte es ganz anders lösen? (Der Code ist extrem gekürzt und jetzt nicht getestet aber ich glaub es müsste alles richtig sein wenn nicht, nicht haun bitte ) Zu beachten ist das es nicht immer genau 3 divs sind sondern evtl. auch ein paar mehr werden also bitte nicht auf die 3 versteifen.

Und eine Frage noch stimmt es das man eher id als class verwenden sollte wenn man die Wahl hat (Geschwindigkeitstechnisch)?

Vielen dank schon mal.

mfg

Chris

 

[ice-breaker]

Es gibt nur eine Lösung, denn die 1. dürfte nicht funktionieren: ids müssen einmalig sein

 

[chrisi01]

dann hab ich ja alles richtig gemacht puhhh danke

mfg

Chris

 

[paddya]

Und die zweite dürfte auch nur funktionieren, wenn du den Ziffern noch einen Buchstaben voranstellst. Laut Spezifikation dürfen IDs und Klassennamen nicht mit einer Ziffer beginnen.

 

[Snyke]

Beides nicht so optimal, ich wuerde anstatt div ein <a/> verwenden, dann das href attribute auf die Zahl setzen und dann beim klick einen returnvalue false angeben, dann wird der Klick gestoppt. Das ganze kannst du ausbauen so dass auch bei deaktiviertem Javascript ein Link dargestellt wird und anklickbar ist, du mit Ajax dann ein bissel Eye Candy einbaust, aber die Seite auch sonst navigierbar bleibt.

Siehe dazu: https://en.wikipedia.org/wiki/Unobtrusive_JavaScript

 

[Darklord]

Ja, ich würde da Synke zustimmen.
Da es sich um eine Verlinkung handelt macht es nur Sinn es als solche auszuzeichnen. So könntest du auch Fälle abfangen wo JavaSkript nicht aktiv sein sollte.

 

[chrisi01]

hi

danke euch werde es aber so belassen es hat seine Gründe Jeder der das Script verwendet braucht eh zwangsweise JS von daher wayne (Denkt einfach mal an ein Browsergame dort wird auch JS verwendet und ohne gehts halt nicht genauso ist es hier )

mfg

Chris

 

[paddya]

hi

danke euch werde es aber so belassen es hat seine Gründe Jeder der das Script verwendet braucht eh zwangsweise JS von daher wayne

Ändert nichts daran, dass es semantisch falsch ist.

 

[baserider]

Auch wenn man JS voraussetzt, spricht trotzdem nix dagegen einen Link zu verwenden , Ausserdm wäre es in deinem Beispiel eh viel einfacher und du brauchtest keine zusätzlichen Klassen oder Id's.

 

[CrazySash]

Es gibt nur eine Lösung, denn die 1. dürfte nicht funktionieren: ids müssen einmalig sein

ich meine auch, dass ID's nicht numerisch beginnen dürfen.

 

[ice-breaker]

schau mal in #4

 

[chrisi01]

ich mach hier mal direkt weiter sind ja die Profis da

<div id="a"></div>
<script>
//......
var seite = 0;
var hohe = 0;
//......
$(document).ready(function() 
{
  $.ajax(
  {
    type: "POST",
    url: "a.php",
    data: "&var1="+seite+"&var2="+hohe,
    success: function(msg)
    {
      var Data = msg.responseText.parseJSON();
      if(Data['a'] == 1)
      {
         $("#a").html("schreib das da ins div a");
      }
    } 
  });
});
</script>

die Datei a.php macht etwas und gibt dann:

{"a":1,"b":1,"c":1,"d":0}

zurück. Dieser Text wird so generiert:

header('Content-Type: application/json');  
//Die 4 variablen werden zuvor durch Datenbankabfragen gesetzt
$rueckgabe = array( 'a' => $l, 'b' => $r, 'c' => $u , 'd' => $o  );
echo json_encode( $rueckgabe );

Nun möchte ich diese 4 Werte im JS abfragen und weiterverwenden. Wenn also z.b. a -->1 dann zeige im div id="a" lala an ansonsten zeige nichts an. Habs erst mit xml probiert und kam damit nicht klar beim googlen bin ich dann drauf gestoßen das man da wohl besser JSON verwenden sollte und das will ich jetzt auch . Im PHP wars auch kein problem aber im JS klappt es nicht. Sobald die Zeile "var Data = msg.responseText.parseJSON();" da steht geht irgendwie nichts mehr. Wie bringe ich jetzt einen JSON Wert z.b. in ein sauberes Array? Hab viel gegoogelt bin aber auf nichts sinnvolles gestoßen. Code wie auch vorhin extrem gekürzt natürlich wird wo anders mit den JS Variablen seite und hohe auch noch was passieren aber das ist hier ja unwichtig.

Vielen dank

edit:

gerade noch einen anderen Teil ergoogelt aber auch das klappt nicht:

      var obj = jQuery.parseJSON(msg);
      if (obj.a == 1)
      {
        $("#a").html("lalala");    
      }

mfg

Chris

 

[Sebmaster]

Request mit jQuery.getJSON machen, oder:

JSON.parse(msg.reponseText);

 

[chrisi01]

geil danke

  $.getJSON("a.php?var1="+seite+"&var2="+hohe, function(data) {
    $('#a').html(data.a);
  });

musste nur die php file auf GET umbauen aber das ist nicht das Problem Es geht danke dir

 

[Sebmaster]

Hmpf, da fällt mir grad ein: Wenn du bei deinem Post-Request bleiben willst, kannst du auch

jQuery.post(url, post_data, function(json) {}, 'json');

nutzen