Question

我有一个带有图标的菜单和每个图标的底部 - 标题。单击图像时，图像缩放为100％，但问题是当我点击其他图标时此图标必须缩小85％宽度，但这不会发生。我尝试在每个图像上使用onclick，或者设置默认值，然后点击调用该宽度，但是注意......如果有人可以提供帮助......

这是我的演示：https://codepen.io/EVasileva/pen/BVayxz

这里是图标：

<div class="icon-registration hover15">
  <div class="bw pic col-xs-6 w20pr pad0" onclick="regType(1,'image_1')"> <img id="image_1" class="w85" src="/images/child.png"><label class="txt-uppercase child">Деца и Юноши</label></div>
  <div class="bw pic col-xs-6 w20pr pad0" onclick="regType(2,'image_2')"> <img id="image_2" class="w85" src="/images/amatior.png"><label class="txt-uppercase amatior">Аматьор</label></div>
  <div class="bw pic col-xs-6 w20pr pad0" onclick="regType(3,'image_3')"> <img id="image_3" class="w85" src="/images/coach.png"><label class="txt-uppercase coach">Треньор</label></div>
  <div class="bw pic col-xs-6 w20pr pad0" onclick="regType(4,'image_4')"> <img id="image_4" class="w85" src="/images/manager.png"><label class="txt-uppercase manager">Мениджър</label></div>
  <div class="bw pic col-xs-6 w20pr pad0" onclick="regType(5,'image_5')"> <img id="image_5" class="w85" src="/images/scouts.png"><label class="txt-uppercase scouts">Скаут</label></div>
  <input id="reg_type" name="reg_type" type="hidden" value="<?=(isset($_GET['reg_type']) ? $_GET['reg_type'] : '' )?>">
</div>

这是一个javacript：

function regType(type, image) {
  var choose = type;
  var new_image = document.getElementById(image);

  document.getElementById('reg_type').value = choose;
  var x = document.createElement("STYLE");
  var t = document.createTextNode("#registration-container {display: block;}");
  x.appendChild(t);
  document.head.appendChild(x);

  document.getElementById(image).style.width = "100%";
}

Answer 1

您自己代码的最低更改

首先更改所有图片＆＃39;宽度为85％然后缩放所选图像

＆＃13;

function regType(type, image) {
  var choose = type;
  var new_image = document.getElementById(image);
  var imgs = document.querySelectorAll("img");
  for (var i = 0; i < imgs.length; i++) {
    imgs[i].style.width = "85%";
  }
  document.getElementById('reg_type').value = choose;
  var x = document.createElement("STYLE");
  var t = document.createTextNode("#registration-container {display: block;}");
  x.appendChild(t);
  document.head.appendChild(x);

  document.getElementById(image).style.width = "100%";


}

＆＃13;

.icon-registration {
  margin-top: 3%;
  text-align: center;
  float: left;
  width: 100%;
}

.pic {
  width: 200px;
}

.icon-registration img {
  width: 85%;
}

.icon-registration img:hover {
  cursor: pointer;
}

.bw {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
  float: left;
}

.icon-registration img:hover .icon-registration {
  color: darkred!important;
}

.bw:hover img {
  -webkit-filter: grayscale(100%);
  color: darkred!important;
}

.bw:hover .child {
  color: darkred!important;
  -webkit-filter: grayscale(0%)!important;
}

.bw:hover .amatior {
  color: #1101a5!important;
  -webkit-filter: grayscale(0%)!important;
}

.bw:hover .coach {
  color: #c1a909 !important;
  -webkit-filter: grayscale(0%)!important;
}

.bw:hover .manager {
  color: #71A61F!important;
  -webkit-filter: grayscale(0%)!important;
}

.pad0 {
  padding: 0px;
}

.w20pr {
  width: 20%;
}

.txt-uppercase {
  text-transform: uppercase;
}

＆＃13;

<div class="icon-registration hover15">
  <div class="bw pic col-xs-6 w20pr pad0" onclick="regType(1,'image_1')"> <img id="image_1" class="w85" src="http://orig09.deviantart.net/72b1/f/2009/072/d/4/tf2_demoman_emblem_by_ninjasaus.png"><label class="txt-uppercase child">Деца и Юноши</label></div>
  <div class="bw pic col-xs-6 w20pr pad0" onclick="regType(2,'image_2')"> <img id="image_2" class="w85" src="https://ih1.redbubble.net/image.262178105.4811/flat,800x800,075,f.jpg"><label class="txt-uppercase amatior">Аматьор</label></div>
  <div class="bw pic col-xs-6 w20pr pad0" onclick="regType(3,'image_3')"> <img id="image_3" class="w85" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRaatwwJsY22QOg2Hk-s72fq_ju5ULgFQmsy5yJznFrLbhzut9nFQ"><label class="txt-uppercase coach">Треньор</label></div>
  <div class="bw pic col-xs-6 w20pr pad0" onclick="regType(4,'image_4')"> <img id="image_4" class="w85" src="https://www.freeiconspng.com/uploads/scout-icon-4.png"><label class="txt-uppercase manager">Мениджър</label></div>
  <div class="bw pic col-xs-6 w20pr pad0" onclick="regType(5,'image_5')"> <img id="image_5" class="w85" src="data:image/png;base64,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">
    <label
      class="txt-uppercase scouts">Скаут</label>
  </div>
  <input id="reg_type" name="reg_type" type="hidden" value="<?=(isset($_GET['reg_type']) ? $_GET['reg_type'] : '' )?>">
</div>

＆＃13;

点击图片后缩小javascript

1 个答案: