Question

我对Javascript很新，我试图获得一种“点击放大”效果，点击放大的图像会再次降低效果。通过用原始图像替换缩略图来进行放大。我还希望稍后使用我的数据库中的图像进行幻灯片放映。

为了做到这一点，我做了一个测试，我替换了一个id，表示一个类可以放大，我也使用一个全局变量，这样我就可以跟踪我正在使用的url。不确定这是最佳做法，但我没有找到更好的解决方案。

第一部分工作正常，我的图像改变没问题，值也根据'alert'语句更新。但是，第二部分，具有类的那个部分永远不会触发。

我做错了什么（除了极有可能的不良做法之外）？

如果不是改变类而是直接更改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。

Javascript onclick事件触发id而不是类

2 个答案: