如何在使用 css 和 jquery 选择图像后突出显示图像答案

【问题标题】：How to highlight image after selection of image using css and jquery如何在使用 css 和 jquery 选择图像后突出显示图像
【发布时间】：2016-06-05 17:52:55
【问题描述】：

$('img').click(function() {
  $('.selected').removeClass('selected');
  $(this).addClass('selected');
});

img {
  border: solid 1px red;
  margin: 10px;
}
.selected {
  background-color: yellow;
  box-shadow: 0px 12px 22px 1px #333;
}
.image-rounded {
border-radius: 6px;
width: 140px;
height: 140px;
}

.well {
width: 100%;
}

.scroll {
width: 100%;
overflow: auto;
white-space: nowrap;
}

.scroll a {
display: inline-block;
width: 140px;
margin: 10px;
}

.scroll a img {
width: 100%;
}

.scroll a:focus {
border: 1px solid yellow;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="well">
  <div class="scroll">
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
  </div>
</div>

我在用户可选择的页面中有多个图像。用户只需单击该图像即可选择任何图像。如何在选择后突出显示该图像。那么如何使用 css 或 jquery 突出显示所选图像

单击图像时，我得到一个黄色轮廓。并且在点击图像时应显示为带有阴影，直到我切换到下一张图像。

【问题讨论】：

我不明白这个问题
你的代码已经这样做了，检查一下。已经创建了脚本并添加了背景颜色以突出显示它
这是在我的 html 整页中执行的操作
你能显示你的html页面吗？你添加了 jquery 库吗？
这些是我添加的 2 个 jquery 库。

标签： javascript jquery html css image

【解决方案1】：

使用toggleClass('className') 功能突出显示选定的图像。以下是工作版本。

$('img').click(function() {
  //New Code replaced here
  $(this).toggleClass('selected');
});

img {
  border: solid 1px red;
  margin: 10px;
}
.selected {
  background-color: yellow;
  box-shadow: 0px 12px 22px 1px #333;
}
.image-rounded {
border-radius: 6px;
width: 140px;
height: 140px;
}

.well {
width: 100%;
}

.scroll {
width: 100%;
overflow: auto;
white-space: nowrap;
}

.scroll a {
display: inline-block;
width: 140px;
margin: 10px;
}

.scroll a img {
width: 100%;
}

.scroll a:focus {
border: 1px solid yellow;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="well">
  <div class="scroll">
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
  </div>
</div>

【讨论】：