Question

好的，当用户输入“雪鲨”时进入文本框＆＃39;电影＆＃39;并按下搜索，海报应弹出。它不会在我放入img的div中。为什么会这样？

代码：

    <!DOCTYPE html>
<html> 
    <head> 
        <meta name=viewport content="width=device-width, initial-scale=1">
    </head>

    <body>
        <input type="text" id="movie" style="width: 400px; height: 20px; font-size: 120%; font-family: Verdana">
        <div id="search" style="text-align: center; width: 100px; height: 25px; position: absolute; left: 450px; top: 8.5px; cursor: pointer; background-color: #3366FF; color: white"> Search </div>
        <p id="donthavemovie"></p>

        <div id="movie_poster_div" style="width: 200px; height: 300px; position: absolute; top: 300px; left: 20px; background-color: red"> <img id="movie_poster" style="max-width: 100%; max-height: 100%" src=""> </div>

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
            <script>
                $(document).ready(function() {
                    $('#movie_poster_div').hide();
                })

                $('#search').click(function() {
                    $snowshark = $('#movie_poster').attr('src','http://ecx.images-amazon.com/images/I/81lqmCozYwL._SL1500_.jpg');

                    if($('#movie').val() == 'snow shark') {
                        $snowshark.fadeIn('slow');
                    }
                })
            </script>
    </body>
</html>

Answer 1

我无法通过'弹出'得到你的意思，以下代码可以正确显示img：

<!DOCTYPE html>
<html> 
    <head> 
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>

    <body>
        <input type="text" id="movie" style="width: 400px; height: 20px; font-size: 120%; font-family: Verdana">
        <div id="search" style="text-align: center; width: 100px; height: 25px; position: absolute; left: 450px; top: 8.5px; cursor: pointer; background-color: #3366FF; color: white"> Search </div>
        <p id="donthavemovie"></p>

        <div id="movie_poster_div" style="width: 200px; height: 300px; position: absolute; top: 300px; left: 20px; background-color: red"> <img id="movie_poster" style="max-width: 100%; max-height: 100%" src=""> </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script>
                $(document).ready(function() {
                    $('#movie_poster_div').hide();
                })

                $('#search').click(function() {
                    $('#movie_poster').attr('src', 'http://ecx.images-amazon.com/images/I/81lqmCozYwL._SL1500_.jpg');

                    if($('#movie').val() == 'snow shark') {
                        $('#movie_poster_div').fadeIn('slow');
                    }
                })
        </script>
    </body>
</html>

为什么不赢得图像显示？

1 个答案: