在點擊的圖像上方應用彩色圓圈

Question

我有一個頁面，在加載時顯示以下內容：

HTML如下（在我使用MVC 5時，以下內容在視圖的foreach語句中構建）

<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 { border-radius: 50%; border: 2px solid red; overflow: visible; }

Answer 2

嘗試這樣的事情（“ row”類錯過了選擇器中的點）

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

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

});