Javascript jquery解决方案，用于单击链接并更改背景图像，同时显示另一组图像

当我点击一个链接时，我很难获得一组要显示的图像。基本上，我想改变的背景图像，以一个单独的图像为每个链接，同时也显示了一个div的图像，每个链接是不同的充分。到目前为止，我所想到的改变了背景图像，但次div图像仅在按第一、第二、第三、第四顺序单击时显示，并且不能随机选择。另外，当浏览链接并从第一次开始时，我必须单击两次，因为第一次单击会隐藏图像的div，而第二次单击基本上会重新开始该过程

以下是我迄今为止提出的代码：

<script>
  $(function(){
    $("#picture-div").hide();
    //alert('jq is working');
    $(".this-class").click(function(){
        ShowPic(this)
    });

    function ShowPic (pic)
    {
        var imgs = ["../images/numbers-01.jpg", "../images/numbers-02.jpg",
                  "../images/numbers-06.jpg", "../images/numbers-09.jpg"];

        var th = $(pic);
        var picLink = th.attr("data-img-src");
        //alert(picLink);

        for (var x=0; x<imgs.length; x++)
        {
          var imgList = imgs[x];
          //alert(imgs[x]);
          if (imgList == picLink)
          {
              $("body").css("background-image", 'url(' + imgList + ')');
          }
        }
    }

  });
</script>

<script>
  $(function(){
    var count = 1;
    $(".previewBox").hide();
    $(".this-class").click(function(){
      SmallDiv(this)
    });

    function SmallDiv (obj)
    {
      var th = $(obj);
      var rel = th.attr("rel");

      if (rel == 1 && count == 1)
      {
          //alert(rel);
          $("#img-1").show();
          $("#img-2").add("#img-3").add("#img-4").hide();
          count++;
      }
      else if (rel == 2 && count == 2)
      {
          $("#img-2").show();
          $("#img-1").add("#img-3").add("#img-4").hide();
          count++;
      }
        else if (rel == 3 && count == 3)
      {
          $("#img-3").show();
          $("#img-1").add("#img-2").add("#img-4").hide();
          count++;
      }
        else if (rel == 4 && count == 4)
      {
          $("#img-4").show();
          $("#img-1").add("#img-2").add("#img-3").hide();
          count++;
      }
          else
        {
            $(".previewBox").hide();
            count = 1;
        }
    }

  });
</script>

HTML:

<div>
 <ul>
  <li><a rel="1" class="this-class" data-img-src="../images/numbers-01.jpg">First       Link</a></li>
  <br><br>
  <li><a rel="2" class="this-class" data-img-src="../images/numbers-02.jpg">Second Link</a></li>
  <br><br>
  <li><a rel="3" class="this-class" data-img-src="../images/numbers-06.jpg">Third Link</a></li>
  <br><br>
  <li><a rel="4" class="this-class" data-img-src="../images/numbers-09.jpg">Fourth Link</a></li>
  </ul>
</div>

<div id="img-1" class="previewBox">
  <ul>
    <img width="100" height="100" src="images/0.jpg">
    <img width="100" height="100" src="images/1.jpg">
    <img width="100" height="100" src="images/2.jpg">
    <img width="100" height="100" src="images/5.jpg">
  </ul>
</div>
<div id="img-2" class="previewBox">
  <ul>
    <img width="100" height="100" src="images/0.jpg">
    <img width="100" height="100" src="images/1.jpg">
    <img width="100" height="100" src="images/6.jpg">
    <img width="100" height="100" src="images/7.jpg">
  </ul>
</div>
<div id="img-3" class="previewBox">
  <ul>
    <img width="100" height="100" src="images/1.jpg">
    <img width="100" height="100" src="images/2.jpg">
    <img width="100" height="100" src="images/6.jpg">
    <img width="100" height="100" src="images/7.jpg">
  </ul>
</div>
<div id="img-4" class="previewBox">
  <ul>
    <img width="100" height="100" src="images/6.jpg">
    <img width="100" height="100" src="images/1.jpg">
    <img width="100" height="100" src="images/0.jpg">
    <img width="100" height="100" src="images/5.jpg">
  </ul>
</div>