时间:2017-05-27 11:36:41

标签: javascript jquery slidetoggle

我有一个带有slideToggle功能的简单代码,可以在4个div中正常工作,它会在这个Div中同时打开隐藏的内容。

它会在点击时更改图像,但只有第一个图像而不是其他图像,我该如何为所有图像做到这一点?

这是4个按钮的代码重复等于它,它打开所有,但不会改变所有图像:

<div class="show" style="display:none"><h1>THE TEXT TO APPEAR</h1></div> <a href="#"><img id="bg" class="loadMore" src="<?php echo get_template_directory_uri(); ?>/img/masGris.svg" /></a>

$(document).ready(function() { $('.loadMore').click(function() { $('.show').slideToggle('1100'); var src = $("#bg").attr('src') == "<?php echo get_template_directory_uri(); ?>/img/less.svg" ? "<?php echo get_template_directory_uri(); ?>/img/masGris.svg" : "<?php echo get_template_directory_uri(); ?>/img/less.svg"; $("#bg").attr('src', src); return false; }); });

2 个答案:

答案 0 :(得分:0)

使用$("#bg")更改选择器的$(this)。因为ID是唯一的。对于所有图片,请尝试使用each()

<强>更新

  $(document).ready(function() {
      $('.loadMore').click(function() {
        $('.show').slideToggle('1100');
    $('.loadMore').each(function(){  
var src = $(this).attr('src') == "<?php echo get_template_directory_uri(); ?>/img/less.svg" ? "<?php echo get_template_directory_uri(); ?>/img/masGris.svg" : "<?php echo get_template_directory_uri(); ?>/img/less.svg";
        $(this).attr('src', src);
        })
        return false;
      });
    });

答案 1 :(得分:0)

这只会更改我点击的图标。如果要更改所有图像,那么点击一下就不会有什么问题?有人在吗?