使用Jquery的onClick事件

Question

我創建了一個項目。 首先，我在相冊上進行了懸停效果，但現在我想進行一次單擊事件。 我正在嘗試使此正確，但尚未完成。

我將提供鏈接： http : //ihannoveraner.de/servicebieter/profile.html單擊鏈接時，將打開“ 參考”頁面。 您可以在圖像上看到懸停效果。 我需要在那個地方單擊圖像並打開彈出窗口

我的Jquery代碼是：

    $('.ref-img').hover(function () {
        $('#MyPopup #albums a').html($(this).html());
        $("#MyPopup").modal("show");
      });

我的HTML代碼：

 <div id="albums"><a href="images/our/01.jpg" class="ref-img">
  <div class="zoom-i">
   <img class="primary" src="images/our/02.jpg">
  <div class="popular-overlay">
 <strong>Logo Design</strong>
</div>
</div>
<img class="secondary-1" src="images/our/03.jpg">
<img class="secondary-2" src="images/our/04.jpg">
<div class="meta">
album 1
</div>
</a>
 </div>

我的模態是：

  <div id="MyPopup" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    &times;</button>
                <h4 class="modal-title">
                </h4>
            </div>
            <div class="modal-body">
                <div id="albums">
                    <a>

                    </a>
                </div>
            </div>

        </div>
    </div>
</div>

在上面我顯示代碼。 從懸停時的這段代碼中，圖像顯示在模型中，但是現在我試圖在單擊后顯示模式。 其次，當彈出窗口打開時， popular-overlay id 使用opacity 1顯示 。 我正在嘗試像這樣建造

鏈接

Answer 1

您可以使用兩種方法來執行此操作：

1. 在HTML中使用onClick屬性。 onClick="functionName()"
2. 在jQuery的項目類上使用點擊功能。

您可以查看此鏈接以供參考：

https://jsfiddle.net/audetwebdesign/rQdZR/