Как в js поменять id элемента по условию

296

23 декабря 2016, 12:01

Добрый день.

В HTML документе документе есть набор мини картинок

<a href="javascript:void(0);"><img class="miniVert" src="images/do_prof.jpg" onclick="setBigImage(this);" oncontextmenu="return false;"></a>

По нажатию на каждую, она выводится в большем размере в элементе:

<div id="resimagewrapper">              
    <img id="bigCertVert" src="images/teach_ut.jpg" oncontextmenu="return false;" />
</div>

С помощью функции:

function setBigImage(obj){
    document.getElementById('bigCertVert').src = obj.src;               
}

Все картинки были альбомной ориентации, поэтому размеры элемента #bigCertVert были жестко заданы.
Сейчас появились картинки книжной ориентации, создал элемент вывода в данной ориентации, требуется, чтобы функция подстановки проверяла класс мини-картинки и в соответствии с ним выводила большой размер в нужном элементе.
Нужно решение на чистом js. Заранее спасибо.

Answer 1

function setBigImage(obj){ 
  document.getElementById('bigCertVert').src = obj.src; 
  if(obj.classList.contains('type0')){ 
    document.getElementById('bigCertVert').classList.add("type0"); 
    document.getElementById('bigCertVert').classList.remove("type1"); 
  }else if(obj.classList.contains('type1')){ 
    document.getElementById('bigCertVert').classList.add("type1"); 
    document.getElementById('bigCertVert').classList.remove("type0"); 
  }; 
}

#resimagewrapper img.type0 {width:100px;height:50px} 
#resimagewrapper img.type1 {width:50px;height:50px}

<div class="list"> 
  <a href="javascript:void(0);"><img class="miniVert type0" src="https://www.gravatar.com/avatar/0089b585f2499f09a32d95c06d545ba0?s=32&d=identicon&r=PG&f=1" onclick="setBigImage(this);" oncontextmenu="return false;"></a> 
  <a href="javascript:void(0);"><img class="miniVert type1" src="https://www.gravatar.com/avatar/0089b585f2499f09a32d95c06d545ba0?s=32&d=identicon&r=PG&f=1" onclick="setBigImage(this);" oncontextmenu="return false;"></a> 
</div> 
<div id="resimagewrapper">               
    <img id="bigCertVert" class="type0" src="images/teach_ut.jpg" oncontextmenu="return false;" /> 
</div>

Answer 2

function setBigImage(obj){ 
 if (obj.className == "miniVert"){ 
 document.getElementById('bigCertVert').src = obj.src;  
 } else { 
 document.getElementById('bigCertHoriz').src = obj.src;  
 }                   
}

.miniVert, .miniHoriz{ 
  width: 200px; 
}

<a href="javascript:void(0);"><img class="miniVert" src="http://images6.fanpop.com/image/photos/33400000/NEKO-k-33431290-714-714.png" onclick="setBigImage(this);" oncontextmenu="return false;"></a> 
 
<a href="javascript:void(0);"><img class="miniHoriz" src="http://images.boomsbeat.com/data/images/full/24384/cat_4-jpg.jpg" onclick="setBigImage(this);" oncontextmenu="return false;"></a> 
<div id="resimagewrapper">               
    <img id="bigCertVert" src="images/teach_ut.jpg" oncontextmenu="return false;" /> 
    <img id="bigCertHoriz" src="images/teach_ut.jpg" oncontextmenu="return false;" /> 
</div>

Например вот так.

Answer 3

function setBigImage(obj){
  if (obj.classList.contains("miniVert"))
    document.getElementById('bigCertVert').src = obj.src;               
  else
    document.getElementById('bigCertHoriz').src = obj.src;               
}