一次显示一个切换的图像

Question

在Joomla页面中，我点击图标时会切换图像。这是jQuery脚本（guradio的礼貌 “与过渡图标和放大图像之间的切换” - April12 '16）：

jQuery(document).ready(function() { 
    jQuery('img.do_things').on('click', function(evnt) { 
    var image_path = jQuery('p#image_path').html(), 
     image1_src = image_path.substring(0, 26) + 'scene_icon' + '.png', 
     elementId = evnt.target.id, 
     image2_src = image_path + elementId + '.png', 
     origsrc = jQuery(this).attr('src'), 
     src = ''; 
     origsrc === image1_src ? src = image2_src : src = image1_src;  //toggle between the src 
     jQuery(this).fadeOut(800, function() { 
     jQuery(this).attr('src', src);  //set src 
     }).fadeIn(1200); 
    }); 
}); 

用于图像路径的HTML是：

<p id="image_path">/templates/beez_20/images/doing_things/</p> 

目前，无论是否点击其他图标，任何显示的图像都会保持显示。所以有可能在具有5个图标的页面中，可以同时显示5个图像。我想改变它，以便在任何时候只显示一个图像。我试图用变量作为标志来解决这个问题，但没有成功。任何帮助将非常感激。

Answer 1

编写的图像转化回其图标形式的函数：

function make_icon(img) { 
    var image_path = jQuery('p#image_path').html(), 
     src = image_path.substring(0, 26) + 'scene_icon' + '.png'; 
    if (img.attr('src') != src) { 
     img.fadeOut(800, function() { 
      img.attr('src', src); 
     }).fadeIn(1200); 
    } 
} 

，并调用它的所有其他图像。

jQuery(document).ready(function() { 
    jQuery('img.do_things').on('click', function(evnt) { 
    var image_path = jQuery('p#image_path').html(), 
     image1_src = image_path.substring(0, 26) + 'scene_icon' + '.png', 
     elementId = evnt.target.id, 
     image2_src = image_path + elementId + '.png', 
     origsrc = jQuery(this).attr('src'), 
     src = ''; 
     origsrc === image1_src ? src = image2_src : src = image1_src;  //toggle between the src 
     jQuery('img.do_things').not(this).each(function(i, img) { 
     make_icon($(img)); 
     }); 
     jQuery(this).fadeOut(800, function() { 
     jQuery(this).attr('src', src);  //set src 
     }).fadeIn(1200); 
    }); 
});