webForumDet fria alternativet

Multipla lager + ändra färg + knapp

JavaScriptur Javascript

1 svar · 477 visningar · startad av Gunnar_B

Gunnar_BMedlem sedan nov. 200528 inlägg
#1

Hej,

Jag har en kod som visar 3 lager just nu.. varje lager innehåller en knapp som byter färg på lagret och tar bort knappen.

Mitt problem är att jag vill ha upp till t.ex 14 sådana här lager och varje lager + knappar måste ju sitt unika id om man ska kunna byta färg och gömma dem.

Hur ska man skriva koden bättre än vad jag har gjort nu? måste jag göra 15 lager i <style> taggen och sedan göra som jag gjort?

Min kod känns väldigt omständig om jag vill ha in 15-20 sådana här lager.

<html>
<head>
<title>titel</title>
<style type="text/css">
#lager1 { background-color:#FFFF00; padding:5px; width:300px; position:relative; margin:5px; font-family:verdana; font-size:12px; }
#lager2 { background-color:#FFFF00; padding:5px; width:300px; position:relative; margin:5px; font-family:verdana; font-size:12px; }
#lager3 { background-color:#FFFF00; padding:5px; width:300px; position:relative; margin:5px; font-family:verdana; font-size:12px; }
.buttonknapp { font-family:verdana; font-size:8pt; }
</style>

<script>
function andrafarg(namn, farg, knapp1, visa1, knapp2, visa2)
{
	document.getElementById(namn).style.backgroundColor = farg;
	document.getElementById(knapp1).style.visibility = visa1;
	document.getElementById(knapp2).style.visibility = visa2;
}
</script>
</head>
<body>

<div id="lager1">
	Lager1
	<div align="right">
		<input type="button" id="knapp1" onclick="javascript:andrafarg('lager1', '#FFF0FF', 'knapp1', 'hidden', 'knapp1_1', 'visible');" value="Ok" class="buttonknapp">
		<input type="button" style="visibility:hidden;" id="knapp1_1" onclick="javascript:andrafarg('lager1', '#FFFF00', 'knapp1_1', 'hidden', 'knapp1', 'visible');" value="Ok" class="buttonknapp">
	</div>
</div>
<div id="lager2">
	Lager2 	
	<div align="right">
		<input type="button" id="knapp2" onclick="javascript:andrafarg('lager2', '#FFF0FF', 'knapp2', 'hidden', 'knapp2_1', 'visible');" value="Ok" class="buttonknapp">
		<input type="button" style="visibility:hidden;" id="knapp2_1" onclick="javascript:andrafarg('lager2', '#FFFF00', 'knapp2_1', 'hidden', 'knapp2', 'visible');" value="Ok" class="buttonknapp">
	</div>
</div>
<div id="lager3">
	Lager3 	
	<div align="right">
		<input type="button" id="knapp3" onclick="javascript:andrafarg('lager3', '#FFF0FF', 'knapp3', 'hidden', 'knapp3_1', 'visible');" value="Ok" class="buttonknapp">
		<input type="button" style="visibility:hidden;" id="knapp3_1" onclick="javascript:andrafarg('lager3', '#FFFF00', 'knapp3_1', 'hidden', 'knapp3', 'visible');" value="Ok" class="buttonknapp">
	</div>
</div>
</body>
</html>
CssonMedlem sedan feb. 2000438 inlägg
#2

Om de i övrigt har samma egenskaper så kan du ju korta ner:

#lager1 { background-color:#FFFF00; padding:5px; width:300px; position:relative; margin:5px; font-family:verdana; font-size:12px; }
#lager2 { background-color:#FFFF00; padding:5px; width:300px; position:relative; margin:5px; font-family:verdana; font-size:12px; }
/* ... */
#lager14 { background-color:#FFFF00; padding:5px; width:300px; position:relative; margin:5px; font-family:verdana; font-size:12px; }

till

.lager { 
    background-color: #FFFF00;
    padding: 5px; 
    width: 300px;
    position: relative; 
    margin: 5px; 
    font-family: verdana; 
    font-size: 12px;
}

men ändå ge dem olika id så du vet vilket du ska ändra i.

134 ms totalt · 3 externa anrop · v20260731065814-full.29ac60f6
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
132 ms — hämta tråd, inlägg och bilagor (db)