javascript - 单击图像时如何在图像上显示刻度线和叠加层，但是当我单击其他图像时它应该隐藏并在新图像上显示相同的图像？

Question

我希望用任何颜色覆盖图像并在其上打勾(选择时)一次只允许一张图像。单击其他图像时，它应该隐藏前一个图像并显示勾号并覆盖在新图像上。

<div class="grid-two imageandtext">
                                    <figure>

                                        <img src="assets/images/painting.jpg" class="img-thumbnail">
                                        <div class="caption">
                                            <p>Painting</p>
                                        </div>                     
                                        <div class="imageandtext image_grid">
                                            <img src="assets/images/photography.jpg" class="img-thumbnail" >
                                            <div class="caption1">
                                                <p>Photography</p>
                                            </div></div>
                                        </figure>
                                    </div>

它应该如下图所示

现在它是这样工作的

https://jsfiddle.net/liza_susan/L8jyum77/

Answer 1

这是一个开始，使用一个伪元素作为cover，一个label和一个radio类型的input code> 负责选择。

我将图像包裹在标签中，单击时，它只会检查输入。

在 CSS 中，当输入被选中时，.image_grid input:checked + .caption::after 规则应用属性来覆盖和显示复选标记。

Updated fiddle

.caption {
  position: absolute;
  top: 0;
  left: 5px;                            /*  changed to match image_grid padding  */
  height: 100%;
  width: calc(100% - 5px);              /*  changed to match image_grid padding  */
  padding: 0 10px;
  box-sizing: border-box;
  pointer-events: none;
}
.caption p {
  display: inline-block;
  padding: 10px;
  color: #fff;
  background: rgba(0,0,0,0.5);
  font-family: 'Myriad Pro regular';
  font-size: 15.31px;
}
.imageandtext {
  position: relative;
}
.image_grid {
  display: inline-block;
  padding-left: 5px;
}
.image_grid img {                       /*  added rule  */
  display: block;
}
.image_grid input {
  display: none;
}
.image_grid input:checked + .caption {
  background: rgba(0,0,0,0.5);
}
.image_grid input:checked + .caption::after {
  content: '✔';    
  position: absolute;
  top: 50%; left: 50%;
  width: 70px; height: 70px;
  transform: translate(-50%,-50%);
  color: white;
  font-size: 60px;
  line-height: 80px;
  text-align: center;
  border: 2px solid white;
  border-radius: 50%;
}

<div class="grid-two imageandtext">

  <div class="imageandtext image_grid">
    <label for="selimg1">
      <img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
    </label>
    <input type="radio" name="selimg" id="selimg1">
    <div class="caption">
      <p>Painting</p>
    </div>
  </div>

  <div class="imageandtext image_grid">
    <label for="selimg2">
      <img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
    </label>
    <input type="radio" name="selimg" id="selimg2">
    <div class="caption">
      <p>Photography</p>
    </div>
  </div>

</div>

---

根据评论，这是一个版本，其中 caption 位于 label 内，作为 span(如 label 只能有内联元素作为子元素)。

有了这个，在input 上不需要唯一的 id 并且可以删除 for 属性，并且不需要补偿任何 padding 和/或 margin 设置image_grid。

Updated fiddle

堆栈片段

.caption {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  pointer-events: none;
}
.caption span {
  display: inline-block;
  padding: 10px;
  color: #fff;
  background: rgba(0,0,0,0.5);
  font-family: 'Myriad Pro regular';
  font-size: 15.31px;
}
.image_grid {
  display: inline-block;
  padding-left: 25px;
}
.image_grid label {
  position: relative;
  display: inline-block;
}
.image_grid img {
  display: block;
}
.image_grid input {
  display: none;
}

.image_grid input:checked + .caption {
  background: rgba(0,0,0,0.5);
}
.image_grid input:checked + .caption::after {
  content: '✔';    
  position: absolute;
  top: 50%; left: 50%;
  width: 70px; height: 70px;
  transform: translate(-50%,-50%);
  color: white;
  font-size: 60px;
  line-height: 80px;
  text-align: center;
  border: 2px solid white;
  border-radius: 50%;
}

<div class="grid-two imageandtext">

  <div class="imageandtext image_grid">
    <label>
      <img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
      <input type="radio" name="selimg">
      <span class="caption">
        <span>Painting</span>
      </span>
    </label>
  </div>

  <div class="imageandtext image_grid">
    <label>
      <img src="http://yaitisme.com/images/getImage.jpg" class="img-thumbnail">
      <input type="radio" name="selimg">
      <span class="caption">
        <span>Painting</span>
      </span>
    </label>
  </div>

</div>