主页 / 问题 / 606226
Accepted
Tariel
Asked:2020-12-21 22:10:33 +0800 CST2020-12-21 22:10:33 +0800 CST

如何有条件地更改js中元素的id

  • 772

下午好。

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解决方案。提前致谢。

javascript

3 个回答

  1. 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>

    例如像这样。

    • 1 
  2. function setBigImage(obj){
  if (obj.classList.contains("miniVert"))
    document.getElementById('bigCertVert').src = obj.src;               
  else
    document.getElementById('bigCertHoriz').src = obj.src;               
}
    • 1
  3. Best Answer

    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>

    • 1

相关问题