在选择卡片时覆盖一个复选图标

Question

我正在患者管理系统上工作，在该系统中，我有一个类似水平卡状患者列表的界面：

当我单击任何病历卡时，我想要的是一个复选图标（内置svg）应重叠在该病历卡的右侧，如下图所示：

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

我所有这些的代码如下

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');
});

.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%);
}

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

请帮助我进行设置.....

Answer 1

您的例子不是很清楚。请看一下这段代码：

$(function() {
  $('.selectable').click(function(e) {
    $(this).parent().toggleClass("color");
    $(".dz-success-mark", this).toggleClass("hide");
  });
});

.card_msg_list {
  width: 340px;
}

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

.hide {
  display: none;
}

.dz-success-mark {
  display: inline-block;
}

<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/