-1

クリックしたときにアクティブなリンク (私のコードの画像) を別の画像に置き換える方法を誰かが知っていますか?

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

基本的に、黄色いトイレット ペーパーのアイコンをクリックすると、「黄色いトイレット ペーパー」の画像が「黄色い封筒」に置き換えられるようにしたいと考えています。他の画像も同じです！

そのような解決策はありますか??

    (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>
4

3 に答える 3

0

すべてが可能です ;）

考えられる解決策の 1 つ (コーディングはあなた次第です):

  1. div.click に 2 つの画像を配置します。1 つは class="closed" で、もう 1 つは class="open" です。
  2. css を使用してデフォルトで img.open を非表示にします
  3. パーツを開くときは、JS を使用して img.closed を非表示にし、img.open を表示します。
于 2013-11-13T19:45:50.387 に答える
0

トイレット ペーパーを非表示にするか、そのソース属性を置き換える必要があります。

 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;
});
于 2013-11-13T19:49:06.013 に答える