ramo_andMedlem sedan nov. 2010214 inlägg Hejsan!
Skulle vilja göra ett filter med hjälp av jQuery. Tänkte mig ett kartfilter där man kan välja land (som detta fast mycket enklare):
http://hemmabutikerna.se/Butiker/
Fast jag tänkte inte köra med samma karta utan göra en egen så varje butik har en länk som visas på kartan, som denna:
http://costplasmonics.eu/
Dessa olika länkar kan jag sedan då lägga i div:ar t ex. "sweden" eller "norway". Så när jag skall filtera på land så kan jag lägga varje land tänkte jag att man gör det via en <select> med olika options och när man väljer land så visas respektive div för varje land.
Kanske nåt sånt här i htmlkoden:
<select>
<option value="sweden">Sweden</option>
<option value="norway">Norway</option>
</select>
</div>
<div class="map">
<div class="sweden">
<a title="Lorem ipsum dummy" class="pointer" style="top: 20px; left: 20px;">#</a>
<a title="Lorem ipsum dummy" class="pointer" style="top: 50px; left: 60px;">#</a>
</div>
<div class="norway">
<a title="Lorem ipsum dummy" class="pointer" style="top: 200px; left: 300px;">#</a>
</div>
</div>
Kan detta funka? Om ja hur får man respektive option value att prata med respektive div med jQuery?
sätt ett id på din select sen hämta du ut kollektionen
$(".map>div").hide().filter(".sweden").show();
Så döljer du alla divar direkt inne i .map och visar alla som har klassen .sweden. så byt ut strängen för vilken klass du vill visa.
ramo_andMedlem sedan nov. 2010214 inlägg Ok, min kod ser ut såhär nu:
<div id="select">
<script type="text/javascript">
$(document).ready(function() {
$("#country_select").change(onSelectChange);
});
function onSelectChange(){
var selected = $("#country_select option:selected");
if(selected.val() = 1){
$(".map>div").hide().filter(".sweden").show();
else if(selected.val() = 2){
$(".map>div").hide().filter(".norway").show();
});
</script>
<select id="country_select">
<option value="0">Välj land</option>
<option value="1">Sweden</option>
<option value="2">Norway</option>
</select>
</div>
<div class="map">
<div class="sweden">
<a title="Lorem ipsum dummy" class="pointer" style="top: 20px; left: 20px;">#</a>
<a title="Lorem ipsum dummy" class="pointer" style="top: 50px; left: 60px;">#</a>
</div>
<div class="norway">
<a title="Lorem ipsum dummy" class="pointer" style="top: 200px; left: 300px;">#</a>
</div>
</div><!-- .map -->
Funkar tyvärr inte, jag måste gjort nåt fel i scriptet?
if frågor är alltid med två = annars så skriver du över värden, men visst det ser väl ok ut om du bara fixar if frågorna.
sen glömmer du stänga dina öppnade if frågor.
ramo_andMedlem sedan nov. 2010214 inlägg Oki jag uppdaterade scriptet så de ser nu ut såhär:
<script type="text/javascript">
$(document).ready(function() {
$("#country_select").change(onSelectChange);
});
function onSelectChange(){
var selected = $("#country_select option:selected");
if(selected.val() == 1){
$(".map>div").hide().filter(".sweden").show();
}
else if(selected.val() == 2){
$(".map>div").hide().filter(".norway").show();
}
});
</script>
Funkar fortfarande inte, har jag gjort nåt mer fel? :)
ja, du har ); i slutet på din funktion, detta är fel och crashar din kod, rensade lite i koden:
http://jsbin.com/apeqil/2/editOm du inte behöver 0,1 eller 2 så hade jag nog kört värdet direkt i select och gått mot dess värde för att sätta vilken klass som skall visas: http://jsbin.com/apeqil/3/edit
ramo_andMedlem sedan nov. 2010214 inlägg Ok ser ju ut att funka fint där. Tyvärr så funkar det ju såklart inte när jag försöker själv.....
så här ser hela min kod ut nu:
<!DOCTYPE html>
<html>
<head>
<title>qTip - Demo</title>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id="page">
<div id="header">
<h1>qTip - Demo</h1>
</div><!-- #header -->
<div id="select">
<select id="country_select">
<option value="0">Välj land</option>
<option value="1">Sweden</option>
<option value="2">Norway</option>
</select>
</div>
<div class="map">
<div class="sweden">
<a title="Lorem ipsum dummy" class="pointer" style="top: 20px; left: 20px;">Sweden 1</a>
<a title="Lorem ipsum dummy" class="pointer" style="top: 50px; left: 60px;">Sweden 2</a>
<a title="Lorem ipsum dummy" class="pointer" style="top: 90px; left: 90px;">Sweden 3</a>
</div>
</div>
<div class="norway">
<a title="Lorem ipsum dummy" class="pointer" style="top: 200px; left: 300px;">Norway 1</a>
</div>
</div><!-- .map -->
<script>
$(document).ready(function() {
var onSelectChange = function(){
var selected = $("option:selected", this).val(),
map = $(".map>div");
if(selected === "1"){
map.hide().filter(".sweden").show();
} else if(selected === "2") {
map.hide().filter(".norway").show();
}
else {
map.show(); //show all..?
}
};
$("#country_select").change(onSelectChange);
</script>
</div><!-- #page -->
</body>
</html>
När jag kollar i firebug så står det "missing } after body function". Vad innebär det?
ramo_andMedlem sedan nov. 2010214 inlägg Nu funkar det! tack för hjälpen
ramo_andMedlem sedan nov. 2010214 inlägg En fråga till.. jag försöker lägga till ett id framför option:selected i variabeln select med då slutar allt funka.. va kan de bero på?
Skulle nämligen villa lägga till ett filter till och då behöver jag ju ha olika id på dem.
om det är min kod så har du:
$("option:selected", this)
den letar upp option:selected inne i this och det är $("#country_select") detta kommer inte fungera med att ha två filter delar, metoden döljer allt som inte är första träffen (.sweden) om du skall ha .red för att kunna filtrera ut sweden och red så få du göra en helt annan kod.
ramo_andMedlem sedan nov. 2010214 inlägg Skulle det vara svårt att göra på samma sätt som hemmabutikerna gjort med deras filter? så man kan välja län och sen visas det länet på kartan, givetvis en google-karta då.
Det kan eventuellt bli så att vi får göra en sådan karta istället nämligen.
med bara ren HTML + Javascript ... det bli ju inte hyper kul eftersom de hämtar ny data för varje select val dom gör.
ramo_andMedlem sedan nov. 2010214 inlägg oj nej de håller ju inte då :) blir ju skitjobbigt
