Javascript onclick事件針對ID觸發，但不針對類

Question

我對Java語言還很陌生，並且正在嘗試獲得一種“單擊放大”效果，其中單擊放大的圖像會再次縮小它。 通過將縮略圖替換為原始圖像來進行放大。 我也想稍后使用來自數據庫的圖像進行幻燈片播放。

為了做到這一點，我進行了一個測試，在其中替換了表明可以通過類進行擴展的id，並且我還使用了全局變量，以便可以跟蹤所使用的url。 不確定這是最佳做法，但我尚未找到更好的解決方案。

第一部分工作正常，我的圖像沒有任何變化，值也根據“ alert”語句進行了更新。 但是，第二部分，帶有該類的那部分永遠不會觸發。

我在做什么錯（除了很可能的許多不良做法）？

如果不是直接更改id（而不是直接更改id（用#image_enlarged等替換.image_enlarged等）），而是要調用第一個函數，即帶有id的函數，但會輸出更新的id，這很令人困惑。

var old_url = "";

$(function(){

   $('#imageid').on('click', function ()
        {       
        if($(this).attr('class')!='image_enlarged'){
            old_url = $(this).attr('src');
            var new_url =  removeURLPart($(this).attr('src'));
            $(this).attr('src',new_url); //image does enlarge
            $(this).attr('class',"image_enlarged");
            $(this).attr('id',"");
            alert($(this).attr('class')); //returns updated class
            }
        });

   $('.image_enlarged').on('click', function (){
       alert(1); //never triggered
       $(this).attr('src',old_url);
       $(this).attr('class',"");
       $(this).attr('id',"imageid");
   });
});

function removeURLPart(e){
   var tmp = e;
       var tmp1 = tmp.replace('thumbnails/thumbnails_small/','');
       var tmp2 = tmp1.replace('thumbnails/thumbnails_medium/',''); 
       var tmp3 = tmp2.replace('thumbnails/thumbnails_large/','');

   return tmp3;
} 

至於html，這確實很簡單：

<figure>
   <img src = "http://localhost/Project/test/thumbnails/thumbnails_small/image.jpg" id="imageid" />
   <figcaption>Test + Price thing</figcaption>
</figure>

<script>
   document.write('<script src="js/jquery-1.11.1.min.js"><\/script>');
</script>
<script type="text/javascript" src="http://localhost/Project/js/onclickenlarge.js"></script>

Answer 1

通過API： http ： //api.jquery.com/on/

.on（）方法將事件處理程序附加到jQuery對象中當前 選定 的 元素 集 。

當您執行$('.image_enlarged').on(...)時，該類沒有元素。 因此，該功能未在任何元素中注冊。

如果要這樣做，則必須在更改類后注冊事件。

這是一個基於您的代碼的示例： http : //jsfiddle.net/8401mLf4/

但這會多次（每次單擊）注冊事件，這是錯誤的。 所以我會做類似的事情：

$('#imageid').on('click', function () {
    if (!$(this).hasClass('image_enlarged')) {
      /* enlarge */
    } else {
      /* restore */
    }
}

JSfiddle： http : //jsfiddle.net/8401mLf4/2/

Answer 2

嘗試使用：

addClass('image-enlarged')

代替：

.attr('class',"image_enlarged");

最好的方法是擁有一個小圖像類和一個大圖像類，它們都包含所需的CSS，然后根據要顯示的內容使用addClass（）和removeClass。