Question

首先，我不是网络开发方面的专家！

我需要一些帮助才能改进我的小型网络应用程序。

您可以在此处查看：https://jsfiddle.net/s9ysfc2b/2/

我的职能：

    function rollout(id) {
  var height = document.getElementById(id).height;

  if(height <= 0) {
    document.getElementById(id).height = 450;
  } else {
    document.getElementById(id).height = 0;
  }
}

  function videotitle(texte){

  document.getElementById('txt').innerHTML = texte;

  }


  function go(loc) {
    document.getElementById('music').src = loc;
  }

css过渡：

iframe {
  transition: 0.3s height;
}

html

<body>
  <div id="txt"></div>
  <iframe id="music" src="about:blank" width="1000" height="0" frameborder="0" scrolling="no"></iframe>


  <form method="post">
    <input name="musicSelection" id="1" type="button" value="" onclick="go('https://www.youtube.com/embed/videoseries?list=PLg46y7jCyHx57PG6pE_UZ46r8PPSDCxnK'); videotitle('<h2>Coucou!</h2>'); rollout('music');" />
    <input name="musicSelection" type="button" value="" onclick="go('https://www.youtube.com/embed/videoseries?list=PLg46y7jCyHx6TNKaZ3auFYw5fT0qWiw67'); videotitle('<h2>C\'est moi...</h2>'); rollout('music')" />
    <input name="musicSelection" type="button" value="" onclick="go('https://www.youtube.com/embed/Di78xYSR0T0?list=PLO-2Biv8vPGPkkVV7LQZUguKkbwCA6qsg'); videotitle('<h2>Tu te souviens?</h2>'); rollout('music')" />

  </form>

</body>

当您点击表情符号时，YouTube视频正在推出。

如果你想点击另一个表情符号，视频就会滚动进来，你必须再次点击表情符号才能播出视频。

当我点击另一个表情符号时，如何滚动和滚出视频？没有点击一次打开它，一次关闭它。

请随意建议我可以采取哪些措施来改善项目的任何部分

（抱歉我的英文..）

谢谢！

Answer 1

我已经完全重新启动了jQuery中的项目，它更容易。我不知道如何在纯JS中解决它..现在它有效。

https://jsfiddle.net/gf3h6a42/

    $(function () {
    $(".playlistTitle").on("click", function (e) {
        $("#genericTitle").text($(this).data("text"));
        $('p').text($(this).data("desc"));
    });
});

$(document).ready(function(){
    $("a").click(function(e) {
        e.preventDefault();

        $("#playlist").attr("src", $(this).attr("href"));
    })
});

$(document).ready(function(){
  $('.button').click(function() {
        if ($('#roll').is(':visible')) {
              $('#roll').slideUp();
            if ($("#roll").data('lastClicked') !== this) {
               $('#roll').slideDown();
            }
        } 
    else {
      $('#roll').slideDown();
    }
        $("#roll").data('lastClicked', this);
  });
});

$(document).ready(function(){
    $('.button').click(function() {  
        $('.button').not(this).removeClass('buttonactive');
        $(this).toggleClass('buttonactive');
    });
});

javascript onclick with animation and iframes

1 个答案: