切換圖像onClick

我有一個很酷的jQuery工作片 - 當我點擊標題鏈接「文本1」或「文本2」時，它下面會出現一些文本。但是，除此之外，我想也請點擊更改關聯的圖像。切換圖像onClick

這可能嗎？

因此，單擊該鏈接將顯示文本並將相關圖像更改爲http://placehold.it/100x150。它會總是更改爲這個特定的圖像。

這裏是一個的jsfiddle 演示：http://jsfiddle.net/hbfbS/

<!DOCTYPE html> 
<!--[if lt IE 7 ]><html dir="ltr" lang="en-US" class="no-js ie ie6 lte7 lte8 lte9"><![endif]--> 
<!--[if IE 7 ]><html dir="ltr" lang="en-US" class="no-js ie ie7 lte7 lte8 lte9"><![endif]--> 
<!--[if IE 8 ]><html dir="ltr" lang="en-US" class="no-js ie ie8 lte8 lte9"><![endif]--> 
<!--[if IE 9 ]><html dir="ltr" lang="en-US" class="no-js ie ie9 lte9"><![endif]--> 
<!--[if (gt IE 9)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]--> 
    <head> 
     <meta charset="UTF-8" /> 
     <title>News</title> 

     <!-- jQuery --> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

     <script type="text/javascript"> 
     function slideonlyone(thechosenone) { 
      $('.newboxes2').each(function(index) { 
        if ($(this).attr("id") == thechosenone) { 
         $(this).slideDown(200); 
        } 
        else { 
         $(this).slideUp(600); 
        } 
      }); 
     } 
     </script> 

     <style type="text/css"> 
     .newboxes2 { display: none;} 
     </style> 

</head> 

     <body> 

      <div class="wrapper"> 

        <div class="grid_4" style="float:left;width:300px"> 
        <h2><a href="javascript:slideonlyone('newboxes1');" style="color:#455560!important;">Test 1</a></h2> 
        <h3 class="head"><img src="http://placehold.it/100x187" class="small" /></h3> 
          <div class="newboxes2" id="newboxes1"> 
           <p> test 1 </p> 
          </div> 
        </div> 

        <div class="grid_4" style="float:left;width:300px"> 
       <h2><a href="javascript:slideonlyone('newboxes2');" style="color:#455560!important;">Test 2</a></h2> 
       <h3 class="head"><img src="http://placehold.it/100x187" class="small" /></h3> 
         <div class="newboxes2" id="newboxes2"> 
          <p>test 2 </p> 
         </div> 
       </div> 

      </div> 

    </body> 

</html>

會很感激一些幫助與此有關。我相信這很簡單。

來源

2012-12-14 michaelmcgurk

http://jsfiddle.net/hbfbS/1/

這裏是amened功能：

function slideonlyone(thechosenone) { 
      $('.newboxes2').each(function(index) { 
        if ($(this).attr("id") == thechosenone) { 
         jQuery(this).parent('.grid_4').children().find('img').attr('src', 'http://placehold.it/100x150'); 
         $(this).slideDown(200); 
        } 
        else { 
         $(this).slideUp(600); 
        } 
      }); 
     }

什麼，我改變了一個快速的解釋：

我加了這條線，jQuery(this).parent('.grid_4').children().find('img').attr('src', 'http://placehold.it/100x150');

它所做的是，得到當前項目的父母被點擊。然後獲取所有孩子，並在其中找到圖像標籤，然後使用新圖像url更新屬性'src'。

您可能希望更好地選擇img元素，因爲這會將父容器中的所有圖像當前更改爲新圖像源。

來源

2012-12-14 10:58:33 CharliePrynn

嗨查理。非常感謝您的回覆。幾乎完美:)我的描述，錯過了它必須返回到100x187點擊後。我認爲我只是把它添加到'else'，但？再次感謝:) – michaelmcgurk

Aaah好點。我想我會在那個家長中有更多的流氓流氓，所以我可能會刪除父母的一部分 - 很多再次感謝 - 我現在就試試這個:) – michaelmcgurk

是的，它適用於那個修復 - 再次感謝你。我會在3分鐘內「打勾」你:)祝你有美好的一天！ – michaelmcgurk

切換圖像onClick

回答

相關問題