Ändra värdet på z-index

Jag har ett antal layers som jag vill kunna ändra z-index på med ett klick och därmed bestämma vilket som ska ligga överst.
Jag har denna kod:

function setZIndex(id, z_index) {
document.getElementById(id).style.zIndex = z_index;
}

och

<input type="button" value="Den ena" 
onClick="setZIndex('ena','5');
setZIndex('andra','4');">

<input type="button" value="Den andra" 
onClick="setZIndex('andra','5');
setZIndex('ena','4');">

Så vill jag inte ha det, det blir väldigt otympligt om jag skulle ha tio olika layers och tio olika knappar.

Kan jag istället helt enkelt bara plussa på 1 på z-index varje gång jag klickar? Hur gör man det? Eller finns det något annat bättre sätt att lösa det på?

/ Robban

För att addera 1 till z-index, kan du använda:

function setZIndex(...){
   var elm = document.getElementById("foo");
   elm.style.zIndex = parseInt(elm.style.zIndex) + 1;
   ...

Red./ Gjorde en ändring

Tack, men tyvärr kan jag inget alls om javascript (eller nån annan kodning) så jag har lite svårt att få ditt exempel att funka. Ska jag byta ut hela min function setZIndex mot ditt exempel? Hur ska sedan onClick-raden se ut?

Hejsan! :)

Titta på följande exempel:

<script type="text/javascript">

var arr = ["layer1","layer2","layer3","layer4","layer5"];

function setZIndex(id){
  var obj = document.getElementById(id);

  obj.style.zIndex = (function(){
	  var len = arr.length,
              max = document.getElementById(arr[0]).style.zIndex;
	  for (var i = 1; i < len; ++i){
	    var val = document.getElementById(arr[i]).style.zIndex;
	    if (val > max){ max = val }
	  }
	  return max;
	})() + 1;
}

</script>

<style type="text/css">

.layers{
  background-color: #eee;
  border          : 1px solid;
  height          : 90px;
  position        : absolute;
  width           : 150px;
}

</style>

<div id="layer1" class="layers" style="z-index:0; left:100px; top:100px;">Layer1</div>
<div id="layer2" class="layers" style="z-index:1; left:110px; top:110px;">Layer2</div>
<div id="layer3" class="layers" style="z-index:2; left:120px; top:120px;">Layer3</div>
<div id="layer4" class="layers" style="z-index:3; left:130px; top:130px;">Layer4</div>
<div id="layer5" class="layers" style="z-index:4; left:140px; top:140px;">Layer5</div>

<form>
  <input type="button" value="Layer1" onclick="setZIndex('layer1')">
  <input type="button" value="Layer2" onclick="setZIndex('layer2')">
  <input type="button" value="Layer3" onclick="setZIndex('layer3')">
  <input type="button" value="Layer4" onclick="setZIndex('layer4')">
  <input type="button" value="Layer5" onclick="setZIndex('layer5')">
</form>

I arr lägger du de id-värden dina element har.

Tack för hjälpen! Det fungerar bra i början, men när jag klickat ett tiotal gånger så slutar det fungera. Ingenting alls händer eller så kommer fel lager fram.
Vad kan det bero på? Jag har inte ändrat nånting, förutom det absolut nödvändigaste.

Jag lyckas inte reproducera det beteendet. Du får nog bifoga den kod du använder.

Jag har testat med din kod rakt av helt oförändrad och det blir samma sak. Dock bara i Opera så det är där felet ligger. I IE funkar det felfritt. Firefox har jag inte testat.

Ah, ok. Det var några parseInt() som saknades. Ändra funktionen till:

function setZIndex(id){
  var obj = document.getElementById(id);

  obj.style.zIndex = (function(){
	  var len = arr.length,
              max = parseInt(document.getElementById(arr[0]).style.zIndex);
	  for (var i = 1; i < len; ++i){
	    var val = parseInt(document.getElementById(arr[i]).style.zIndex);
	    if (val > max){ max = val }
	  }
	  return max;
	})() + 1;
}

:)

Ahh, men det är ju lysande! Tack så mycket för hjälpen! :)

/ Robban

Nu skulle jag behöva lite hjälp med att uppgradera den här koden lite. Jag vill att flera layers samtidigt ändrar z-index, alla med samma id (helst) eller olika.
Jag har flera fält som jag vill ändra samtidigt men med koden ovan lyckas jag bara ändra ett av dom.

Tacksam för hjälp!

/Robban

Hej!

Ett förslag kan ses nedan. Resultatet kan dock bli knepigt om två lager överlappar varandra och de ges samma värde för z-index (se exemplet).

<script type="text/javascript">
var arr = [
  ["layer1","layer2"],
  ["layer3","layer4"], "layer5"];

function setZIndex(id){
  var objs = getGroupById(id),
      len  = objs.length;

  for (var i = 0; i < len; ++i){
    document.getElementById(objs[i]).style.zIndex = (function(){
          var len = arr.length,
              max = parseInt(document.getElementById(typeof(arr[0]) == "object" ? arr[0][0] : arr[0]).style.zIndex);
          for (var i = 1; i < len; ++i){
            var val = parseInt(document.getElementById(typeof(arr[i]) == "object" ? arr[i][0] : arr[i]).style.zIndex);
            if (val > max){ max = val }
          }
          return max;
        })() + 1;
  }
}

function getGroupById(id){
  var l = arr.length;
  for (var i = 0; i < l; ++i){
    if (typeof(arr[i]) == "object"){
      for (var j = 0; j < arr[i].length; ++j){
        if (arr[i][j] == id) return arr[i];
      }
    } else if (arr[i] == id){
      return [arr[i]];
    }
  }
  return [];
}
</script>

<style type="text/css">

.layers{
  background-color: #eee;
  border          : 1px solid;
  height          : 90px;
  position        : absolute;
  width           : 150px;
}

</style>

<div id="layer1" class="layers" style="z-index:0; left:100px; top:100px;">Layer1</div>
<div id="layer2" class="layers" style="z-index:0; left:110px; top:110px;">Layer2</div>
<div id="layer3" class="layers" style="z-index:1; left:120px; top:120px;">Layer3</div>
<div id="layer4" class="layers" style="z-index:1; left:130px; top:130px;">Layer4</div>
<div id="layer5" class="layers" style="z-index:2; left:140px; top:140px;">Layer5</div>

<form>
  <input type="button" value="Layer1" onclick="setZIndex('layer1')">
  <input type="button" value="Layer2" onclick="setZIndex('layer2')">
  <input type="button" value="Layer3" onclick="setZIndex('layer3')">
  <input type="button" value="Layer4" onclick="setZIndex('layer4')">
  <input type="button" value="Layer5" onclick="setZIndex('layer5')">
</form>