圖像返回原始來源OnClick？

我在jQuery/JavaScript中有一個展開和摺疊系統設置。一旦你點擊DIV，DIV中的圖像就會改變它的狀態。但是，當您似乎再次單擊該DIV時，圖像不會返回到原始狀態。它陷入了另一種狀態。圖像返回原始來源OnClick？

注意：我在同一頁面上的多個實例中創建了一個手風琴效果的腳本，當您單擊不同的「ITEM」時，圖像返回到先前選擇的DIV的原始狀態。

這裏是的jsfiddle：http://jsfiddle.net/4Dtd8/

太謝謝你了！

來源

2012-01-18 Aaron Brewer

上的代碼只是一個評論，你會發現它更容易閱讀，如果您更換'和'$'jQuery'。至少它更容易遵循我（做了很多jQuery，實際上看到這些詞讓我分心）。 – Kekoa 2012-01-18 17:34:17

@Kekoa：如果我用美元符號（$）開始所有的jQuery語句，那麼衝突發生和錯誤的空間會更多。我會建議在每個語句之前使用jQuery。 – 2012-01-18 17:40:37

除非加載另一個庫，例如使用'$'的原型，否則您應該沒有衝突。 http://docs.jquery.com/Using_jQuery_with_Other_Libraries – Kekoa 2012-01-18 18:18:24

使用CSS放置圖像中的h1標籤的背景。然後，你可以從.open.closed切換類的項目，讓CSS手柄改變圖像。

jQuery('.item .expandacc').click(function() { 
    jQuery('.item .expandacc').not(this).removeClass("open").addClass("closed") 
     .siblings('.contentacc').slideUp('normal'); 
    jQuery(this).next('.contentacc').slideToggle('normal'); 
    jQuery(this).toggleClass("closed").toggleClass("open"); 
});

http://jsfiddle.net/petersendidit/4Dtd8/9/

來源

2012-01-18 17:57:41 PetersenDidIt

它停留在備用狀態的原因是該行：

jQuery(this).find('img').attr('src','http://www.jornal.us/icons/expandIcon.jpg');

不管是什麼狀態時，它應該是中，這是最後的代碼，影響圖像的源。因此，源始終設置爲該行中指定的內容。

來源

2012-01-18 17:36:45 maxedison

所以你建議我如何解決這個問題？在選擇了不同的DIV CLASS後，要讓圖像返回到原始狀態，但在選擇該類時仍然保持圖像處於備用狀態？謝謝！ – 2012-01-18 17:39:49

您可以監視內容的可見性以確定應顯示哪個圖標。

http://jsfiddle.net/4Dtd8/7/

jQuery('.item .expandacc').click(function() { 
    if (jQuery($(this).next('.contentacc').is(':visible')) { 
     jQuery('.expandacc h1 img').attr('src', 'http://www.novell.com/documentation/extend52/Docs/help/exteNd/books/GTRImages/expandIcon.png'); 
    } 
    else { 
     jQuery(this).find('img').attr('src', 'http://www.jornal.us/icons/expandIcon.jpg'); 
    } 
    jQuery('.item .expandacc').not(this).siblings('.contentacc').slideUp('normal'); 
    jQuery(this).siblings('.contentacc').slideToggle('normal'); 
});

來源

2012-01-18 17:43:10 mrtsherman

但是有了多個課程，我將如何實現我所拍攝的內容？例如：http://jsfiddle.net/4Dtd8/6/ – 2012-01-18 17:51:40

另外，我認爲.is（'：visible'）將因爲幻燈片動畫而始終爲真。 http://jsfiddle.net/skram/4Dtd8/8/ – 2012-01-18 17:53:20

@AaronBrewer - 使用'next'，以便它只檢查下一個內容塊。 HTTP：//的jsfiddle。net/4Dtd8/7/ – mrtsherman 2012-01-18 17:53:26

我添加了一個自定義的ATTR isExpanded的圖像標籤保存，如果它展開或摺疊，並檢查了價值發現它的狀態。

DEMO這裏

的jQuery（ '項目.expandacc。 '）點擊（函數（）{
的jQuery（這）.siblings（）的slideToggle（ '正常'）。' contentacc。';

var $img = jQuery(this).find('img'); 
    var isExpanded = $img.attr('isExpanded'); 

    // For some browsers, `isExpanded` is undefined; for others, 
    // `isExpanded` is false. Check for both. 
    if (typeof isExpanded === 'undefined' || 
      isExpanded === false || 
       isExpanded == 'true') { 
     $img.attr('src', 'http://www.jornal.us/icons/expandIcon.jpg'); 

     $img.attr('isExpanded', 'false'); 
    } else { 
     $img.attr('src', 'http://www.novell.com/documentation/extend52/Docs/help/exteNd/books/GTRImages/expandIcon.png'); 

     $img.attr('isExpanded', 'true'); 
    }

來源

2012-01-18 17:43:47

圖像返回原始來源OnClick？

回答

相關問題