Question

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

我让bios的div切换得很好但同时我想要点击的图像改变。当单击另一个图像时，该图像将发生变化，当前图像将变回其原始图像。看起来这应该是一件不寻常的事情，但我似乎无法找到或找出答案。

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

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

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

1 个答案: