[jQuery] Behavior wordt alleen aan eerste select attached - Softwareontwikkeling

zondag 16 november 2008 21:11

Acties:

0 Henk 'm!

Hopla!

Topicstarter

Ik probeer een scriptje te schrijven dat een onchange event hangt aan elke select met een (eigen) goto attribuut. In onderstaand voorbeeld wordt de code wel aan de eerste select gehangen, maar niet aan de tweede. Kan iemand mij uitleggen waarom?

JavaScript:

$(document).ready(function() {
  $('select[goto]').each(function () {
    $(this).change(function () {
      var selected = $("select option:selected").val();
      if (selected != 'ignore') {
        document.location = $(this).attr("goto") + '/' + selected;
      }
    });
  });
});

// met html:

<select goto="www.cnn.com">
  <option value="ignore">Choose...
  <option value="finance">CNN Finance
  <option value="sports">CNN Sports
</select>

<select goto="www.bbc.co.uk">
  <option value="ignore">Choose...
  <option value="finance">BBC Finance
  <option value="sports">BBC Sports
</select>

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

maandag 17 november 2008 08:35

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Moet je niet $$('select[goto']) gebruiken? Bij mootools (prototype based) is het selecteren op id iig enkel, de rest dubbel.

Anyone who gets in between me and my morning coffee should be insecure.

maandag 17 november 2008 09:50

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Nee, $ kan in jQuery voor van alles gebruikt worden; een soort Frankenstein zeg maar

Intentionally left blank

maandag 17 november 2008 10:28

Acties:

0 Henk 'm!

Bosmonster

*zucht*

crisp schreef op maandag 17 november 2008 @ 09:50:
Nee, $ kan in jQuery voor van alles gebruikt worden; een soort Frankenstein zeg maar

Ik vind 1 query-selector-functie ook wel genoeg... Beetje onzin om 2 functies te maken ($ en $$), waarvan $$ ook alles kan wat $ kan. $('blaat') is precies hetzelfde als $$('#blaat'), lekker zinloos.

Magoed.. backwards-compatibility verhaal natuurlijk, nadat ze de query-selectors van jQuery gekopieerd hadden.

edit: Het voorbeeld van TS zou overigens gewoon moeten werken, al kun je het wel verkorten (waarom eerst een each en dan een change, je kunt ook direct de change-hangen aan het resultaat van je selector-query). Ik zal het eens proberen te reproduceren.

edit2: Bij mij doet ie het hier gewoon op beiden hoor?

Er zit echter wel een grote fout in, namelijk regel 4:

JavaScript:

1	var selected = $("select option:selected").val();

Dat is een globale query-selector, waarmee je de waarde van de eerste select pakt. Als je dus de eerste op ignore laat staan dan zal de tweede (schijnbaar) niks doen...

Samengevat (en iets verkort), wordt je code dan:

JavaScript:

$(function() {
  $('select[goto]').change(function () {
      var selected = $("option:selected", this).val();
      if (selected != 'ignore') {
        document.location = $(this).attr("goto") + '/' + selected;
      }
  });
});

[ Voor 48% gewijzigd door Bosmonster op 17-11-2008 10:36 ]

maandag 17 november 2008 10:34

Acties:

0 Henk 'm!

Verwijderd

Dat moet gewoon werken volgens mij, maar waarom zit die each loop erin? Kan ook korter:

JavaScript:

1	$('select[goto]').change(function() {

En waarom kies je trouwens voor een goto attribuut en zet je de gehele url niet in de value van de option?

edit:
Hmm Bosmonster was me voor

[ Voor 7% gewijzigd door Verwijderd op 17-11-2008 10:35 ]

maandag 17 november 2008 10:44

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Bosmonster schreef op maandag 17 november 2008 @ 10:28:
[...]

Ik vind 1 query-selector-functie ook wel genoeg... Beetje onzin om 2 functies te maken ($ en $$), waarvan $$ ook alles kan wat $ kan. $('blaat') is precies hetzelfde als $$('#blaat'), lekker zinloos.

Ik weet niet of dat wel zo zinloos is; stel ik heb dit:

HTML:

1
2
3

<body>
<div id="body"></div>
</body>

Wat geeft $('body') nu terug in jQuery?

Intentionally left blank

maandag 17 november 2008 11:13

Acties:

0 Henk 'm!

Bosmonster

*zucht*

crisp schreef op maandag 17 november 2008 @ 10:44:
[...]

Ik weet niet of dat wel zo zinloos is; stel ik heb dit:
HTML:
1
2
3
<body>
<div id="body"></div>
</body>
Wat geeft $('body') nu terug in jQuery?

De body, zoals het hoort bij een query-selector. Het is gewoon CSS-style he. Wil je de div, dan hoor je $('#body') te doen of $('div#body'), je vraagt per slot van rekening een ID op.

In CSS doe je toch ook:

Cascading Stylesheet:

body {
}

div#body {
}

[ Voor 21% gewijzigd door Bosmonster op 17-11-2008 11:14 ]

maandag 17 november 2008 11:50

Acties:

0 Henk 'm!

Reveller

Hopla!

Topicstarter

Verwijderd schreef op maandag 17 november 2008 @ 10:34:
[...]
En waarom kies je trouwens voor een goto attribuut en zet je de gehele url niet in de value van de option?

... je hebt helemaal gelijk, wat stom. Typisch zo'n momentje van "waarom makkelijk doen als het moeilijk kan?". Enfin, hier de uiteindelijke functie. Bedankt iedereen!

JavaScript:

$(document).ready(function() {
  $('select.goto').change(function () {
      var selected = $("option:selected", this).val();
      if (selected != 'ignore') {
        document.location = selected;
      }
  }); 
});

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

maandag 17 november 2008 12:32

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Bosmonster schreef op maandag 17 november 2008 @ 11:13:
[...]

De body, zoals het hoort bij een query-selector. Het is gewoon CSS-style he. Wil je de div, dan hoor je $('#body') te doen of $('div#body'), je vraagt per slot van rekening een ID op.

Typisch antwoord van een jQuery gebruiker

Ik geef het voorbeeld omdat in andere libraries $() in eerste instantie een ID-selector is. jQuery gooit die conventie overboord en doet iets compleet anders waar andere libraries voor een andere method-naam kiezen. Resultaat: verwarring en niet interoperabel met andere libraries (iets waar we als webdevvers wel al jaren op hameren richting browservendors).

jQuery maakt het zelfs nog bonter door op basis van het type, of zelfs de inhoud van het argument aan $() andere behaviour te vertonen: $(function) en $('<span/>'). Persoonlijk vind ik dat puur bad practice...

[ Voor 8% gewijzigd door crisp op 17-11-2008 12:35 ]

Intentionally left blank

maandag 17 november 2008 12:38

Acties:

0 Henk 'm!

Bosmonster

*zucht*

crisp schreef op maandag 17 november 2008 @ 12:32:
[...]

Typisch antwoord van een jQuery gebruiker

Ik geef het voorbeeld omdat in andere libraries $() in eerste instantie een ID-selector is. jQuery gooit die conventie overboord en doet iets compleet anders waar andere libraries voor een andere method-naam kiezen. Resultaat: verwarring en niet interoperabel met andere libraries (iets waar we als webdevvers wel al jaren op hameren richting browservendors).

Dan ben je gewoon niet goed op de hoogte van de geschiedenis. jQuery is simpelweg begonnen als query-selector-engine (vandaag ook de naam). De andere libraries hebben het gekopieerd en aan $$ gehangen omdat bij hen $ al een wrapper was voor getElementById.

Maakt niet zoveel uit, maar van conventie was al geen sprake, laat staan van het overboord gooien van.

Wat dat laatste betreft, 10x liever dat dan hoe andere libraries dat doen, met 20 globale functies: $, $$, $A, $E, $AA-ZZ etc

maandag 17 november 2008 12:45

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Bosmonster schreef op maandag 17 november 2008 @ 12:38:
[...]

Wat dat laatste betreft, 10x liever dat dan hoe andere libraries dat doen, met 20 globale functies: $, $$, $A, $E, $AA-ZZ etc

Tsja, maar ik ben ueberhaupt al geen fan van $() als functienaam

Intentionally left blank