单击切换图像

Question

I have a cool piece of jQuery I'm working with - when I click the header links 'Text 1' or 'Text 2' some text appears below it.我正在使用一个很酷的 jQuery - 当我单击标题链接“文本 1”或“文本 2”时，它下方会出现一些文本。 However, as well as this, I'd like to change the associated Image on click too.但是，除此之外，我也想在单击时更改关联的图像。

Is this possible?这可能吗？

So clicking the link would reveal the text AND change the relevant image to http://placehold.it/100x150 .因此，单击链接将显示文本并将相关图像更改为http://placehold.it/100x150 。 It would always change to this specific image.它总是会变成这个特定的图像。

Here is a JSFiddle Demo : http://jsfiddle.net/hbfbS/这是一个 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>

Would really appreciate some help with this.真的很感激这方面的一些帮助。 I'm sure it's something simple.我确定这很简单。

Answer 1

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

Here is the amened function:这是修正功能：

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);
                  }
             });
        }

A quick explaination of what I changed:快速解释我所做的更改：

I added this line, jQuery(this).parent('.grid_4').children().find('img').attr('src', 'http://placehold.it/100x150');我添加了这一行， jQuery(this).parent('.grid_4').children().find('img').attr('src', 'http://placehold.it/100x150');

What it does is, gets the parent of the current item being clicked.它的作用是获取被单击的当前项的父项。 Then gets all the children and finds the image tag within it and then updates the attribute 'src' with the new image url.然后获取所有子元素并在其中找到图像标记，然后使用新图像 url 更新属性“src”。

You may want select the img element better because this will currently change all images within the parent container to the new image source.您可能希望更好地选择 img 元素，因为这将当前将父容器中的所有图像更改为新的图像源。

单击切换图像

问题描述

1 个解决方案

解决方案1
6 已采纳 2012-12-14 10:58:33

单击切换图像

问题描述

1 个解决方案

解决方案1 6 已采纳 2012-12-14 10:58:33

解决方案1
6 已采纳 2012-12-14 10:58:33