文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在选择的卡片上覆盖复选图标

问在选择的卡片上覆盖复选图标
EN

Stack Overflow用户
提问于 2019-12-10 18:29:09
回答 1查看 48关注 0票数 0

我正在做患者管理系统，我有一个横卡形状的患者列表界面，如下所示：

​

​

当我单击任何患者卡时，检查图标(内置在svg中)应覆盖在卡的右侧，如下图所示：

​

​

但它出现在卡片之外的某个地方

我的代码如下所示

​

代码语言：javascript
复制
var addclass = 'color';
var $cols = $('.selectable').click(function(e) {
    $cols.removeClass(addclass);
	$cols.find('.overlay').css('display','none');
    $(this).addClass(addclass);
	$(this).find('.overlay').css('display','block');
});
代码语言：javascript
复制
.color {
    background-color: #E1EAF0;
	width: auto;
	
}

.overlay {
    position:absolute;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    cursor: pointer;
}

.overlaycontents{
    position: absolute;
    top: 50%;
    left: 90%;
    font-size: 50px;
    color: white;
    transform: translate(-50%,-5%);
    -ms-transform: translate(-50%,-50%);
}
代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<ul class="list-unstyled card_msg_list">
	<li>
		<a class="selectable">
		
			<div class="overlay" style="display:none">
				<div class="overlaycontents">
					<div class= "dz-success-mark ">
						<svg width= "30px " height= "30px " viewBox= "0 0 54 54 " version= "1.1 " xmlns= "http://www.w3.org/2000/svg " xmlns:xlink= "http://www.w3.org/1999/xlink " xmlns:sketch= "http://www.bohemiancoding.com/sketch/ns ">
							<path d= "M23.5,31.8431458 L17.5852419,25.9283877 C16.0248253,24.3679711 13.4910294,24.366835 11.9289322,25.9289322 C10.3700136,27.4878508 10.3665912,30.0234455 11.9283877,31.5852419 L20.4147581,40.0716123 C20.5133999,40.1702541 20.6159315,40.2626649 20.7218615,40.3488435 C22.2835669,41.8725651 24.794234,41.8626202 26.3461564,40.3106978 L43.3106978,23.3461564 C44.8771021,21.7797521 44.8758057,19.2483887 43.3137085,17.6862915 C41.7547899,16.1273729 39.2176035,16.1255422 37.6538436,17.6893022 L23.5,31.8431458 Z M27,53 C41.3594035,53 53,41.3594035 53,27 C53,12.6405965 41.3594035,1 27,1 C12.6405965,1 1,12.6405965 1,27 C1,41.3594035 12.6405965,53 27,53 Z " id= "Oval-2 " stroke-opacity= "0.198794158 " stroke= "#006600 " fill-opacity= "0.816519475 " fill= "#FFFFFF " sketch:type= "MSShapeGroup "></path>
						</svg>
					</div>
				</div>
			</div>
			
			<span class="image">
			<img src="images/img.jpg" alt="img" style="border-left: 2px solid #FF0000 !important;">
			</span>
			<span>
			<span class="title">Jamil Ahmed</span>
			<span class="time">RI-00089</span>
			</span>
			<span class="message">KD</span>
		</a>
	</li>
	<li>
		<a class="selectable">
		
			<div class="overlay" style="display:none">
				<div class="overlaycontents">
					<div class= "dz-success-mark ">
						<svg width= "30px " height= "30px " viewBox= "0 0 54 54 " version= "1.1 " xmlns= "http://www.w3.org/2000/svg " xmlns:xlink= "http://www.w3.org/1999/xlink " xmlns:sketch= "http://www.bohemiancoding.com/sketch/ns ">
							<path d= "M23.5,31.8431458 L17.5852419,25.9283877 C16.0248253,24.3679711 13.4910294,24.366835 11.9289322,25.9289322 C10.3700136,27.4878508 10.3665912,30.0234455 11.9283877,31.5852419 L20.4147581,40.0716123 C20.5133999,40.1702541 20.6159315,40.2626649 20.7218615,40.3488435 C22.2835669,41.8725651 24.794234,41.8626202 26.3461564,40.3106978 L43.3106978,23.3461564 C44.8771021,21.7797521 44.8758057,19.2483887 43.3137085,17.6862915 C41.7547899,16.1273729 39.2176035,16.1255422 37.6538436,17.6893022 L23.5,31.8431458 Z M27,53 C41.3594035,53 53,41.3594035 53,27 C53,12.6405965 41.3594035,1 27,1 C12.6405965,1 1,12.6405965 1,27 C1,41.3594035 12.6405965,53 27,53 Z " id= "Oval-2 " stroke-opacity= "0.198794158 " stroke= "#006600 " fill-opacity= "0.816519475 " fill= "#FFFFFF " sketch:type= "MSShapeGroup "></path>
						</svg>
					</div>
				</div>
			</div>
			
			<span class="image">
			<img src="images/img.jpg" alt="img" style="border-left: 2px solid #FF0000 !important;">
			</span>
			<span>
			<span class="title">Salem Ahmed</span>
			<span class="time">RI-00089</span>
			</span>
			<span class="message">KD</span>
		</a>
	</li>
</ul>

​

请帮我把这个放好.

jquery
jquery-ui
onclick
css-selectors
overlay
EN

回答 1

Stack Overflow用户

发布于 2019-12-11 09:18:31

你的例子不是很清楚。请看下面的代码：

​

代码语言：javascript
复制
$(function() {
  $('.selectable').click(function(e) {
    $(this).parent().toggleClass("color");
    $(".dz-success-mark", this).toggleClass("hide");
  });
});
代码语言：javascript
复制
.card_msg_list {
  width: 340px;
}

.color {
  background-color: #E1EAF0;
  width: auto;
}

.hide {
  display: none;
}

.dz-success-mark {
  display: inline-block;
}
代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<ul class="list-unstyled card_msg_list">
  <li>
    <a class="selectable">
      <span class="image">
			  <img src="images/img.jpg" alt="img" style="border-left: 2px solid #FF0000 !important;">
			</span>
      <span>
			<span class="title">Jamil Ahmed</span>
      <span class="time">RI-00089</span>
      </span>
      <span class="message">KD</span>
    </a>
    <div class="hide dz-success-mark">
      <svg width="30px" height="30px" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink " xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
      <path d= "M23.5,31.8431458 L17.5852419,25.9283877 C16.0248253,24.3679711 13.4910294,24.366835 11.9289322,25.9289322 C10.3700136,27.4878508 10.3665912,30.0234455 11.9283877,31.5852419 L20.4147581,40.0716123 C20.5133999,40.1702541 20.6159315,40.2626649 20.7218615,40.3488435 C22.2835669,41.8725651 24.794234,41.8626202 26.3461564,40.3106978 L43.3106978,23.3461564 C44.8771021,21.7797521 44.8758057,19.2483887 43.3137085,17.6862915 C41.7547899,16.1273729 39.2176035,16.1255422 37.6538436,17.6893022 L23.5,31.8431458 Z M27,53 C41.3594035,53 53,41.3594035 53,27 C53,12.6405965 41.3594035,1 27,1 C12.6405965,1 1,12.6405965 1,27 C1,41.3594035 12.6405965,53 27,53 Z " id= "Oval-2" stroke-opacity="0.198794158 " stroke="#006600" fill-opacity= "0.816519475" fill= "#FFFFFF" sketch:type="MSShapeGroup"></path>
      </svg>
    </div>
  </li>
  <li>
    <a class="selectable">
      <span class="image">
			<img src="images/img.jpg" alt="img" style="border-left: 2px solid #FF0000 !important;">
			</span>
      <span>
			<span class="title">Salem Ahmed</span>
      <span class="time">RI-00089</span>
      </span>
      <span class="message">KD</span>
    </a>
    <div class="hide dz-success-mark">
      <svg width="30px " height="30px " viewBox="0 0 54 54 " version="1.1 " xmlns="http://www.w3.org/2000/svg " xmlns:xlink="http://www.w3.org/1999/xlink " xmlns:sketch="http://www.bohemiancoding.com/sketch/ns ">
							<path d= "M23.5,31.8431458 L17.5852419,25.9283877 C16.0248253,24.3679711 13.4910294,24.366835 11.9289322,25.9289322 C10.3700136,27.4878508 10.3665912,30.0234455 11.9283877,31.5852419 L20.4147581,40.0716123 C20.5133999,40.1702541 20.6159315,40.2626649 20.7218615,40.3488435 C22.2835669,41.8725651 24.794234,41.8626202 26.3461564,40.3106978 L43.3106978,23.3461564 C44.8771021,21.7797521 44.8758057,19.2483887 43.3137085,17.6862915 C41.7547899,16.1273729 39.2176035,16.1255422 37.6538436,17.6893022 L23.5,31.8431458 Z M27,53 C41.3594035,53 53,41.3594035 53,27 C53,12.6405965 41.3594035,1 27,1 C12.6405965,1 1,12.6405965 1,27 C1,41.3594035 12.6405965,53 27,53 Z " id= "Oval-2 " stroke-opacity= "0.198794158 " stroke= "#006600 " fill-opacity= "0.816519475 " fill= "#FFFFFF " sketch:type= "MSShapeGroup "></path>
						</svg>
    </div>
  </li>
</ul>

​

使用.toggleClass()可能更容易，请查看更多：https://api.jquery.com/toggleclass/

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/59265123

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档