Question

我已经获得了这个jQuery代码，但是当我尝试执行它时，它会在blok2返回其正式状态时生成$(document).ready(function() { $(".blok2").click(function() { $(".codeacademy").toggle(); }); $(".blok2").click(function() { $("<iframe />", { src: "https://www.youtube.com/embed/07Q6aUPfqkM" }).appendTo(".blok2"); }); });的副本。有人知道如何解决这个问题吗？

每当我点击我的blok时，它就会扩展并显示为它应该的视频。但是，当我点击它缩小它时，它会制作一个iframe的副本，它不会隐藏。我尝试了一些解决方案，但我不知道如何取消隐藏iframe，并且它不会发出嗡嗡声。

＆＃13;

.rij1 {
  display: flex;
  width: 500px;
}
.rij2 {
  display: flex;
  width: 500px;
}
.blok1 {
  background-color: cadetblue;
  height: 250px;
  width: 250px;
}
.blok2 {
  background-color: palevioletred;
  height: 250px;
  width: 250px;
}
.blok3 {
  background-color: darkseagreen;
  height: 250px;
  width: 250px;
}
.blok4 {
  background-color: coral;
  height: 250px;
  width: 250px;
}
img.codeacademy {
  display: block;
  width: 100%;
  height: auto;
  content: url("http://s3.amazonaws.com/codecademy-blog/assets/logo_blue_dark.png");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='rij1'>
  <div class='blok1'></div>
  <div class='blok2'>
    <img class="codeacademy">
  </div>
</div>

<div class='rij2'>
  <div class='blok3'></div>
  <div class='blok4'></div>
</div>

＆＃13;

'use strict'

var express = require('express');
var router = express.Router();
var fs = require('fs-extra');


//Get file
router.get('/:file', function(req, res, next) {
  //this is where your file will be downloaded    
  var filenamewithpath = '/home/downloads/' + req.params.file;

  if (!fs.existsSync(filename)){
    res.status(404).json({'message' : 'file not found'})
    return;
  }
  res.download(filename , fileToShow)
});

//Post file
router.post('/', function(req, res, next) {    
  req.pipe(req.busboy);
  req.busboy.on('file', function (fieldname, file, filename) {    
    var fstream = fs.createWriteStream('/home/temp/' + filename);   
    file.pipe(fstream);    
    fstream.on('close', function () {
      res.status(201).json({file: filename});
    });
  });
});

module.exports = router;

＆＃13;

Answer 1

问题是由于您有两个点击事件处理程序附加到blok2元素 - 它们都在每次点击时执行;他们不会像你期待的那样在连续的点击上切换。

要解决此问题，您可以使用单击事件处理程序检查iframe元素中是否存在blok2。如果有，它将删除它并显示codecademy图像。如果没有，它会创建iframe并隐藏图像。像这样：

$(document).ready(function() {
  $(".blok2").click(function() {
    var $iframe = $(this).find('iframe');
    if ($iframe.length) {
      $(".codeacademy").show();
      $iframe.remove();
    } else {
      $(".codeacademy").hide();
      $("<iframe />", {
        src: "https://www.youtube.com/embed/07Q6aUPfqkM"
      }).appendTo(".blok2");
    }
  });
});

.rij1 {
  display: flex;
  width: 500px;
}
.rij2 {
  display: flex;
  width: 500px;
}
.blok1 {
  background-color: cadetblue;
  height: 250px;
  width: 250px;
}
.blok2 {
  background-color: palevioletred;
  height: 250px;
  width: 250px;
}
.blok3 {
  background-color: darkseagreen;
  height: 250px;
  width: 250px;
}
.blok4 {
  background-color: coral;
  height: 250px;
  width: 250px;
}
img.codeacademy {
  display: block;
  width: 100%;
  height: auto;
  content: url("http://s3.amazonaws.com/codecademy-blog/assets/logo_blue_dark.png");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='rij1'>
  <div class='blok1'></div>
  <div class='blok2'>
    <img class="codeacademy">
  </div>
</div>

<div class='rij2'>
  <div class='blok3'></div>
  <div class='blok4'></div>
</div>

iframe附加制作副本

1 个答案: