Question

我是建立网站的新手，所以有人可以帮助我吗？我想在html中使用if / else语句在我的网站上显示文本和一些电影。下面我添加了我的html代码，但它将if / else语句视为文本而不是代码。如何使用opens API的js代码的温度输出来获取这个if / else语句？

       <!DOCTYPE html>
            <html>
            <head>
            <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
                <link rel="stylesheet" href="main.css">
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
                <script type='text/javascript' src='app.js'></script>

            </head>

            <body>
                <input type="text" value="In which city are you?" id="city">
                    <button id="search">Submit</button>
                    <p id="demo"></p>

                    <p>The weather outside is: </p>

                    <div class= "weather">
                        Fill in your location first
                    </div>

                    <p>What will you be making for dinner tonight?</p> 
                    <div class="inspiration">
                        Give me some inspiration!

                        <div class="recipe">        
    if (Math.round(data.main.temp) == null) {
        <p>Fill in your location first</p>
    } else {
        if (Math.round(data.main.temp) < -5) {
            <p> Oh man.. It is way too cold! Stay inside the whole day and have a nice and hot turkey soup. Make sure you don’t freeze </p>
            <iframe width="392" height="220" src="https://www.youtube.com/embed/SdJfxGo5PQM?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

        } else if (Math.round(data.main.temp) === -5 - 5){
            <p>wow look at that weather, it is quite cold.. With those temperatures a chicken and fries curry would be nice don’t you think? </p>
            <iframe width="392" height="220" src="https://www.youtube.com/embed/PfoOxeTXdXA?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

        } else if (Math.round(data.main.temp) === 5 - 15) {
            <p> Today is a good day, don’t you think? Some cheeseburger cups would taste great!</p>
            <iframe width="392" height="220" src="https://www.youtube.com/embed/k-2KdH6k0nA?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

        } else if (Math.round(data.main.temp) === 15 - 25) {
            <p> With those temperatures it is not a bad idea to have a BBQ! Here is a recipe for hummus to have as a side dish!</p>
            <iframe width="4392" height="220" src="https://www.youtube.com/embed/XN4aSh-Dj4Y?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

        } else if (Math.round(data.main.temp) === 25-35) {
            <p> Damn it's hot! I can hardly think of anything to have for dinner to cool down. </p>
            <p> Just go get some ice cream please. </p>

        } else {
            <p>Those temperatures are insane! Are you in a sauna?</p>
        }
    }
                        </div>
                    </div>
                </div>
            </body>
            </html>

这是我的js代码

        $(document).ready(function(){
        $('#search').click(function(){
            var city = $('#city').val();
            console.log(city);
            $.getJSON( "http://api.openweathermap.org/data/2.5/weather?q=" + city + "&units=metric&appid=9334f947893792dcb9b2e2c05ae23eb0", function( data ) {
                $('.weather').html(Math.round(data.main.temp)+ ' degrees Celcius');
            });
        });
        });

Answer 1

需要在<script>标记内定义JavaScript代码，否则无效。

只需将此代码放在jQuery代码下面的相同函数中即可。并使用任何ID代替<div>和<p>创建一个空的<iframe>标记，然后使用jQuery填充它们。然后根据您的条件更改其innerHTML（使用jQuery函数html()）。例如：

$(document).ready(function()
{
    $('#search').click(function()
    {
        var city = $('#city').val();
        console.log(city);
        $.getJSON( "http://api.openweathermap.org/data/2.5/weather?q=" + city + "&units=metric&appid=9334f947893792dcb9b2e2c05ae23eb0", function( data )
        {
            $('.weather').html(Math.round(data.main.temp)+ ' degrees Celcius');
        });
    });

    if (Math.round(data.main.temp) < -5)
    {
        $("#YOU_CHOSEN_ID").html("<p> Oh man.. It is way too cold! Stay inside the whole day and have a nice and hot turkey soup. Make sure you don’t freeze </p>
        <iframe width='392' height='220' src='https://www.youtube.com/embed/SdJfxGo5PQM?rel=0&amp;showinfo=0' frameborder='0' allowfullscreen></iframe>")
    }
});

我使用了一个条件。像我对这个一样添加其余部分。

如果您仍然遇到问题请告诉我，以便我可以帮助您。

在html中使用if / else语句

1 个答案: