切换图像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

回答

相关问题