Question

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

我决定让幻灯片保持简单。我有一个带有主图像的div和下面的三个缩略图。当我单击缩略图时，我希望mainPhoto div类更改为具有不同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>

Answer 1

在这里：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";
    });
  });

Jquery响应式可点击图片幻灯片

1 个答案: