jquery - 如何同时切换 div 可见性和图像源？

Question

我是 jquery 的新手，我在这个页面上苦苦挣扎：http ://www.revolutionlasvegas.com/instructors2.php

我的 div 和 bios 切换得很好，但同时我希望点击的图像发生变化。当点击另一张图片时，该图片会发生变化，而当前图片将变回原来的样子。这似乎不应该是一件不寻常的事情，但我似乎无法找到或找出答案。

任何帮助将不胜感激！谢谢！

 <script>
        function showonlyone(thechosenone) {
             $('.bio').each(function(index) {
                  if ($(this).attr("id") == thechosenone) {
                       $(this).show(200);
                  }
                  else {
                       $(this).hide(600);
                  }
             });
         }
         </script>
        <div id="light_blue">
        <div class="randomordercontent group1"><a id="pic1" href="javascript:showonlyone('bio1');"><img src="images/instructors/thumb_damian.jpg" width="198" height="300" alt="" class="inst_thumbs"></a></div>
        <div class="randomordercontent group1"><a id="pic2" href="javascript:showonlyone('bio2');"><img src="images/instructors/thumb_martie.jpg" width="198" height="300" alt="" class="inst_thumbs"></a></div>
        <div class="randomordercontent group1"><a id="pic3" href="javascript:showonlyone('bio3');"><img src="images/instructors/thumb_ray.jpg" width="198" height="300" alt="" class="inst_thumbs"></a></div>
        <div class="randomordercontent group1"><a id="pic4" href="javascript:showonlyone('bio4');"><img src="images/instructors/thumb_debi.jpg" width="198" height="300" alt="" class="inst_thumbs"></a></div>
        <div class="randomordercontent group1"><a id="pic5" href="javascript:showonlyone('bio5');"><img src="images/instructors/thumb_stetson.jpg" width="198" height="300" alt="" class="inst_thumbs"></a></div>
        </div>

        <div class="bio" id="bio1" style="display: none"><h1 style="font-weight:bold">Damian Hill</h1></br></br></div>
        <div class="bio" id="bio2" style="display: none"><h1 style="font-weight:bold">Martie</h1></br></br></div>
        <div class="bio" id="bio3" style="display: none"><h1 style="font-weight:bold">Ray Chargualaf Jr</h1></br></br></div>
        <div class="bio" id="bio4" style="display: none"><h1 style="font-weight:bold">Debi Scaletta</h1></br></br></div>
        <div class="bio" id="bio5" style="display: none"><h1 style="font-weight:bold">Stetson</h1></br></br></div>

        <script type="text/javascript">
        randomordercontentdisplay.init()
        </script>

Answer 1

you can save src of the image in temp variable and then restore on clicking any other image.. and do replace the image on anchor click....

    function showonlyone(thechosenone, ClickedAnchorID) {
    var temp;
    $('.bio').each(function(index) {
    if ($(this).attr("id") == thechosenone) {
    $(this).show(200);
    temp = $("#ClickedAnchorID").next('img').attr('href')}
    else {
    $(this).hide(600);
    $("#ClickedAnchorID").next('img').attr('href',temp)
    }
    });
    }