2

我是 JS 的新手，学习它对我来说是一种负担。我正在努力使用媒体查询构建一个响应式网站。我想要一个可点击的幻灯片，当您单击三个缩略图之一时，它会更改主照片。

我决定让幻灯片保持简单。我有一个主图像和下面三个缩略图的 div。当我单击缩略图时，我希望mainPhotodiv 类更改为具有不同background-image. 我正在使用 jquery.on("click",函数并.addClass在单击其中一个缩略图时更改 div 类。我这样做是因为我将使用媒体查询。如果屏幕更小或更大，我正在调用的 div 类将具有不同的背景图像以适应更大或更小的窗口。我还没有添加@media代码。但最终我会根据某些屏幕尺寸为每个班级提供不同的背景图像。

现在我只想保持简单并创建首先工作的脚本。我的问题是，当我单击缩略图时，它只能工作一次，而且如果我在无法单击其他缩略图thumbnailThree之前单击，它只能按顺序工作。thumbnailTwo我希望能够按我想要的时间点击所有三个。也许有一种更简单的方法可以做到这一点，但我是 JS 和 jQuery 的新手。下面是我的代码：

<style>
  body {
    margin: 0;
    padding: 10px;
    font-size: 16px;
    color: #000000;
    background-color: #fff;
  }
  h1 {
    font-size:1.5em;
  }
  .wrap {
    position: relative;
    margin: 0 auto;
    padding: 0;
    width: 800px;
  }
  #mainDiv {
    float: left;
    width: 800px;
    background-color:#888;
  }
  .mainPhoto {
    float: left;
    width: 800px;
    height: 600px;
    background-image: url(images/mainPhoto);
    background-repeat:no-repeat;
  }
  .mainPhotoTwo {
    background-image:url(images/mainPhotoTwo);
  }
  .mainPhotoThree {
    background-image:url(images/mainPhotoThree);
  }
  #secondaryDiv{
    float:left;
    width: 780px;
    margin:0;
    padding:10px;
    font-size: .9em;
    color: #fff;
    background-color: #333;
  }
  #thumbOne {
    float:left;
    width:250px;
    height:250px;
    margin:10px 0px 0px 0px;
    padding:0;
    background-image:url(images/thumbOne);
    background-repeat:no-repeat;
  }
  #thumbTwo {
    float:left;
    width:250px;
    height:250px;
    margin:10px 0px 0px 10px;
    padding:0;
    background-image:url(images/thumbTwo);
    background-repeat:no-repeat;
  }
  #thumbThree {
    float:left;
    width:250px;
    height:250px;
    margin:10px 0px 0px 10px;
    padding:0;
    background-image:url(images/thumbThree);
    background-repeat:no-repeat;
  }
  .clearDiv{
    clear:both;
    line-height:1px;
  }
</style>
</head>
<body>
  <div class="wrap">
    <div class="mainPhoto">
    </div>
    <div id="secondaryDiv">
      <h1>Title Test</h1>
      <p>A paragraph of text</p>
      <div id="thumbOne"></div>
      <div id="thumbTwo"></div>
      <div id="thumbThree"></div>
      <div class='clearDiv'></div>
    </div>
  </div>
</body>
<script>
  $(document).ready(function(){
    $('#thumbOne').on("click", function(){
      $('div.mainPhoto').addClass('mainPhoto');
    });
  });
  $(document).ready(function(){
    $('#thumbTwo').on("click", function(){
      $('div.mainPhoto').addClass('mainPhotoTwo');
    });
  });
  $(document).ready(function(){
    $('#thumbThree').on("click", function(){
      $('div.mainPhoto').addClass('mainPhotoThree');
    });
  });
</script>
4

1 回答 1

0

给你：http: //jsfiddle.net/JQ7Rk/

问题是 .addClass 不断将类添加到您的 div 中，而不是替换它们。一旦添加了所有三个类， .addClass 就停止添加它们（因为它们已经打开了！）。因此，使它成为最后一个是永久性的！

编辑：哦，我差点忘了。我没有你的照片，所以我用可爱的猫代替了它们。

我决定在 vanilla js 中进行更改

  $(document).ready(function(){
    $('#thumbOne').on("click", function(){
        var main = document.getElementById("mainPhoto");
        main.className = "mainPhoto";
    });
  });

  $(document).ready(function(){
    $('#thumbTwo').on("click", function(){
        var main = document.getElementById("mainPhoto");
        main.className = "mainPhoto mainPhotoTwo";
    });
 });

  $(document).ready(function(){
    $('#thumbThree').on("click", function(){
        var main = document.getElementById("mainPhoto");
        main.className = "mainPhoto mainPhotoThree";
    });
  });
于 2013-10-17T20:51:21.170 回答