javascript - 在单击的图像顶部应用彩色圆圈

Question

我有一个页面，加载时显示如下:

HTML 如下(下面是在 View 中的 foreach 语句中构建的，因为我使用的是 MVC 5)

<div class="boxTop"></div>
  <div id="panel1" class="box">
    <div class="row col-xs-12 margin0" style="margin-left:-8%">
      <div class="col-md-6 col-xs-6">
        <img data-name="blackcherry" alt="cherries.png" data-id="1" src="/Content/Images/FlavourLab/cherries.png">
      </div>
      <div class="col-md-6 col-xs-6">
         <img data-name="coconut" alt="coconut" data-id="2" src="/Content/Images/FlavourLab/coconut.png">
      </div>
    </div>
    <div class="clearfix"></div>
    <div class="marginBottom10 visible-xs-block"></div>
    <div class="row col-xs-12 margin0" style="margin-left:-8%">
      <div class="col-md-6 col-xs-6">
         <img data-name="mango" alt="mango" data-id="3" src="/Content/Images/FlavourLab/mango.png">
      </div>
      <div class="col-md-6 col-xs-6">
         <img data-name="strawberries" alt="strawberries" data-id="4" src="/Content/Images/FlavourLab/strawberries.png">
      </div>
    </div>
   <div class="clearfix"></div>
   <div class="marginBottom10 visible-xs-block"></div>
</div>
<div class="boxBtm"></div>

我想要做的是，当其中一张图片被点击时，我需要在它上面放置以下 css 圆圈，以显示它已被选中，圆圈的 CSS 是这样的

#circle1 {
background: none repeat scroll 0 0 green;
height: 80px;
width: 80px;
opacity: 0.4;
}

.circle {
border-radius: 50%;
display: inline-block;
margin-right: 20px;
}

它被渲染成这样:

<div class="circle" id="circle"></div>

我现在的 jQuery 是这样的:

$("#panel1 row img").click(function () {

   var id = $(this).attr("data-id").val();

   alert(id);

});

2 件事:

1. jQuery 没有触发，我不确定为什么。有人可以解释一下吗？

2. 如何将上面的 CSS Circle 添加到点击的图片中？

Answer 1

1. 这个 #panel1 row img 是一个错误的选择器，将其更改为 #panel1 .row img - 注意类名选择器 .row
2. 更改您的点击处理程序以执行此操作 $(this).toggleClass("circle");

3. .circle 类应如下所示:

   .circle { 边界半径:50%； 边框:2px 纯红色； 溢出:可见； }