Question

点击切换图像

2012-12-14

1042

javascript jquery

我正在使用一段很酷的 jQuery - 当我单击标题链接“文本 1”或“文本 2”时，一些文本会出现在其下方。但是，除此之外，我还想 在单击时更改相关图像 。

这可能吗？

因此，单击链接将显示文本并将相关图像更改为 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>

非常感谢您提供一些帮助。我相信这很简单。

Answer 1

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

这是修改后的函数：

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 元素，因为这当前会将父容器内的所有图像更改为新的图像源。