Question

在Joomla页面中，我有一些图标，当点击切换图像时。这是jQuery脚本（由guradio提供＆＃34;在图标和更大的图像之间切换过渡＆＃34; - April12＆＃39; 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);
  });
});

一次显示一个切换的图像

1 个答案: