在点击的图像上方应用彩色圆圈

Question

我有一个页面，加载后会显示：

此HTML的内容如下（以下内容是在视图中的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 class应该是这样的：

   .circle { border-radius: 50%; border: 2px solid red; overflow: visible; }

Answer 2

尝试这样的事情（＆＃34;行＆＃34;类错过选择器中的点）

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

   $(this).addClass('circle');

});