Question

我正在为我的一个客户创建特定项目的幻灯片。当点击该按钮时，它应该将幻灯片显示所有正确的图像附加到ID为＃34;幻灯片＆＃34;的div。出于某种原因，当我点击按钮时没有任何反应。有人可以查看我的代码并查看可能出现的错误吗？

<html>
    <head>
        <title>
            Black Pro Pix | Professional Photography
        </title>
        <meta charset="UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="blackpropixfallen.css">
        <!-- Satisfy Google Font -->
        <link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
        <!-- Slick Carousel -->
        <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
        <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>




    </head>

    <body>
      <div id="myModal" class="modal">
          <div class="modal-dialog">
            <div class="modal-content">
                  <div class = "reveal">
                      <!-- Modal Content (The Image) -->
                      <img  src="" id = "mimg" class = "modalimg" width = "100%" height = "auto">
                </div>
            </div>
          </div>
        </div>
        <div id = "slideshow">

        </div>

                    <div class = "hiddenfigures" style = "display:none" >
                      <div class = "slickcarousel">
                        <img src = "Fallengallery/IMG_4553.jpg">
                        <img src = "Fallengallery/Interconnected.jpg">
                        <img src = "Fallengallery/LifeLongLies pt.2 (yellow).jpg">
                        <img src = "Fallengallery/Mornin' Murderin' Marauder (abstract).jpg">
                        <img src = "Fallengallery/Mornin' Murderin' Marauder (Red).jpg">
                        <img src = "Fallengallery/Nightfall (vibrant).jpg">
                        <img src = "Fallengallery/Paris 15.jpg">
                        <img src = "Fallengallery/Paris 18.jpg">
                        <img src = "Fallengallery/Somebody's Watching.jpg">
                      </div>
                    </div>
                    <div class = "container-fluid">
                      <div class = "row">
                        <div class = "col-xs-12">
                          <button class = "hiddenf">
                            Hidden Figures
                          </button>
                        </div>
                      </div>
                    </div>

          <script type="text/javascript">
            $(document).ready(function(){
              $('.slickcarousel').slick({
                autoplay: true,
                slidesToShow: 4,
                variableWidth: true,
                centerMode: true,
                nextArrow: "<span class = 'glyphicon glyphicon-arrow-right'>",
                prevArrow: "<span class = 'glyphicon glyphicon-arrow-left'>",
                slidesToScroll: 1

              });
              $("img").click(function(){
                var sr=$(this).attr('src');
                $('#mimg').attr('src',sr);
                $("#myModal").modal(); 
              });
              displayHiddenf();

            });
            function displayHiddenf() {
                $(".hiddenf").click(function() {
                    $("#slideshow").empty();
                    $(".hiddenfigures").appendTo("#slideshow");
                });

  </script>


    </body>
</html>

Answer 1

在<div> hiddenfigures中，style属性仍然存在。尝试删除js-method

中的style=display:none;

Answer 2

您可以使用此替换代码。

＆＃13;

$(document).ready(function(){
    function runSlideShow() {
        $('.slickcarousel').slick({
            autoplay: true,
            slidesToShow: 4,
            variableWidth: true,
            centerMode: true,
            nextArrow: "<span class = 'glyphicon glyphicon-arrow-right'>",
            prevArrow: "<span class = 'glyphicon glyphicon-arrow-left'>",
            slidesToScroll: 1
        });
    }
    $(".hiddenf").click(function(){
        $('.hiddenfigures').css('display','block');
        runSlideShow();
    });
    $("img").click(function(){
        var sr=$(this).attr('src');
        $('#mimg').attr('src',sr);
        $("#myModal").modal(); 
    });
});

＆＃13;

<div id="myModal" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="reveal">
                <!-- Modal Content (The Image) -->
                <img  src="" id = "mimg" class = "modalimg" width = "100%" height = "auto">
            </div>
        </div>
    </div>
</div>
<div id="slideshow">
    <div class="hiddenfigures" style="display:none">
        <div class = "slickcarousel">
            <img src="https://placeimg.com/300/150/any">
            <img src="https://placeimg.com/300/150/any">
            <img src="https://placeimg.com/300/150/any">
            <img src="https://placeimg.com/300/150/any">
            <img src="https://placeimg.com/300/150/any">
            <img src="https://placeimg.com/300/150/any">
            <img src="https://placeimg.com/300/150/any">
            <img src="https://placeimg.com/300/150/any">
            <img src="https://placeimg.com/300/150/any">
        </div>
    </div>
</div>
<div class = "container-fluid">
    <div class = "row">
        <div class = "col-xs-12">
            <button class = "hiddenf">
                Hidden Figures
            </button>
        </div>
    </div>
</div>

＆＃13;

Answer 3

删除display：none;

删除div

$（“＃slideshow”）.wrap（“”）;

幻灯片不会附加到div

3 个答案: