Question

有人知道如何在点击它时将活动链接（我的代码中的图像）替换为另一个图像吗？

当您点击黄色卫生纸的图标时，我基本上希望将“黄色卫生纸”的图像替换为“黄色信封”。和其他形象一样！

有这样的解决方案吗？

    (function($) {

    var allPanels = $('.accordion > .day').hide();

    $('.accordion > .click > a').click(function() {
        allPanels.slideUp();

        if($(this).parent().next().is(':hidden'))
        {
            $(this).parent().next().slideDown();
        }

        return false;
    });

})(jQuery);

和HTML：

<div class="accordion">

  <div class="click">
    <a href=""><img src="http://designmodo.github.io/Flat-UI/images/icons/svg/toilet-paper.svg"></a>
  </div>

  <div class="day">
    <img src="http://designmodo.github.io/Flat-UI/images/icons/svg/mail.svg">
    <p>Tomatillo sweet pepper carrot salad cress arugula. Kombu cabbage sorrel celery soko plantain tigernut caulie parsnip tomatillo spinach avocado. Spring onion water chestnut parsnip water spinach cress napa cabbage fennel beetroot.</p>
  </div>


  <div class="click">
    <a href=""><img src="http://designmodo.github.io/Flat-UI/images/icons/svg/retina.svg"></a>
  </div>

  <div class="day">
      <img src="http://designmodo.github.io/Flat-UI/images/icons/svg/clocks.svg"><p>Kohlrabi sea lettuce wattle seed mung bean asparagus cucumber chard salsify kombu beetroot radicchio black-eyed pea. Scallion salsify beetroot tigernut prairie turnip artichoke daikon celery turnip greens. Horseradish aubergine carrot gumbo maize collard greens potato caulie lentil arugula salsify rock melon fava bean celery.</p>
  </div>

</div>

Answer 1

一切皆有可能;）

一种可能的解决方案（由您来编码）：

在你的div.click中有两个图像，一个带有class =“关闭”，另一个带有class =“open”
使用css默认隐藏img.open
打开零件时，使用JS隐藏img.closed并显示img.open

Answer 2

您必须隐藏卫生纸或更换它的来源属性：

 if($(this).parent().next().is(':hidden')) {
        $(this).hide();
        $(this).parent().next().slideDown();
    }

或将两个图像放在同一个

中

<a href="">
    <img src="http://designmodo.github.io/Flat-UI/images/icons/svg/toilet-paper.svg">
    <img src="http://designmodo.github.io/Flat-UI/images/icons/svg/mail.svg" style="display: none;">
 </a>

并调用toggle（）函数，如下所示

$('.accordion > .click > a').click(function() {
    $(this).children('img').toggle();
    $(this).parent().next().slideToggle();
    return false;
});

Answer 3

通过应用以下代码，您可以实现您的目标：

http://jsfiddle.net/8bwre/2/

(function($) {

    var allPanels = $('.accordion > .day').hide();

    $('.accordion > .click > a').click(function() {
        allPanels.slideUp();

        /******************/
        var currentSrc = $(this).children('img').attr('src');

        var newSrc = $(this).parent().next().children('img').attr('src');

        $(this).children('img').attr('src', newSrc);

        $(this).parent().next().children('img').attr('src', currentSrc);
        /******************/


        if($(this).parent().next().is(':hidden'))
        {
            $(this).parent().next().slideDown();
        }

        return false;
    });

})(jQuery);

然后在CSS中，您可以使用display: none;

隐藏第二个图像

jQuery手风琴 - 如何用图像替换活动链接？

3 个答案: