如果使用某個類別隱藏使用javascript的div

我有一個網站，播放在屏幕上漂移的雲彩的CSS動畫。如果使用某個類別隱藏使用javascript的div

然後我添加了一個JavaScript函數，它從雅虎的天氣api中提取數據。我用這個來根據天氣改變背景顏色。我喜歡它，所以我現在的雲動畫只有在陰天時纔會出現（也就是說，當javascript使body class爲「body.cloudy」或「body.partly-cloudy」時）。

雲現在在div中，所以我認爲我需要做到這一點，所以如果身體是'body.cloudy'或'body.partly-cloudy'以外的任何其他東西，但我是不知道如何做到這一點。

<body> 
<div class="sky"> 
     <div class="cloud cloud01"></div> 
     <div class="cloud cloud02"></div> 
     <div class="cloud cloud03"></div> 
     <div class="cloud cloud04"></div> 
     <div class="cloud cloud05"></div> 
     <div class="cloud cloud06"></div> 
    </div> 
</body>

$.YQL = function(query, callback) { 
    var encodedQuery = encodeURIComponent(query.toLowerCase()), 
     url = 'http://query.yahooapis.com/v1/public/yql?q=' 
      + encodedQuery + '&format=json&callback=?'; 
    $.getJSON(url, callback); 
}; 
$.YQL("select * from rss where url='http://weather.yahooapis.com/forecastrss?p=UKXX0029'",function(data){ 
      var w=data.query.results.item; 
      var _class=w.condition.text; 
var encodedclass = _class.replace(/\s+/g, '-').toLowerCase(); 

      $('body').addClass(encodedclass); 

     });

CSS

.cloud { 
    width: 512px; 
    height: 512px; 
    position: absolute; 
} 

.cloud01 { 
    top: 10px; 
    z-index: 1; 
    background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds02.png) 0 0 no-repeat; 
    animation: drift 35s linear infinite; 
} 

.cloud02 { 
    top: 10px; 
    z-index: 1; 
    background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds03.png) 0 0 no-repeat; 
    animation: drift02 35s linear infinite; 
} 

.cloud03 { 
    top: 10px; 
    z-index: 1; 
    background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds04.png) 0 0 no-repeat; 
    animation: drift02 55s linear infinite; 
} 

.cloud04 { 
    top: 10px; 
    z-index: 1; 
    background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds04.png) 0 0 no-repeat; 
    animation: drift 45s linear infinite; 
} 

.cloud05 { 
    top: 10px; 
    z-index: 1; 
    background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds03.png) 0 0 no-repeat; 
    animation: drift 30s linear infinite; 
} 

.cloud06 { 
    top: 10px; 
    z-index: 1; 
    background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds02.png) 0 0 no-repeat; 
    animation: drift02 25s linear infinite; 
} 

@keyframes drift { 
    from {transform: translate(-150px,-550px);} 
    to {transform: translate(350px, 550px);} 
} 

@keyframes drift02 { 
    from {transform: translate(350px,-550px);} 
    to {transform: translate(1050px, 550px);} 
} 

body.unknown{ 
    background-color: blue; 
} 
body.cloudy, body.partly-cloudy, body.mostly-cloudy { 
    background-color: red; 
} 

body.rain, body.thunderstorms, body.drizzle, body.showers, body.thundershowers, body.scattered-showers, body.scattered-thunderstorms, body.isolated-thunderstorms { 
    background-color: blue; 
} 

body.sunny, body.fair, body.hot { 
    background-color: yellow; 
} 

body.snow, body.mixed-rain-and-snow, body.mixed-rain-and-sleet, body.snow-flurries, body.light-snow-showers, body.blowing-snow, body.hail, body.sleet, body.snow-showers, body.heavy-snow { 
    background-color: black; 
}

來源

2016-02-25 user3005003

我倒是覺得這個CSS會做到這一點：

/* Hide the clouds by default */ 
body .cloud { 
    display: none; 
} 
/* Show them when it's cloudy or partly-cloudy */ 
body.cloudy .cloud, body.partly-cloudy .cloud { 
    display: block; 
}

來源

2016-02-25 17:38:06

謝謝你，工作！ – user3005003

您可以使用hasClass()

if ($("body").hasClass("cloudy")) 
{ 
    //show clouds 
} 
else 
{ 
    // hide clouds //add sun 
    $(".cloud").hide(); 
}

希望這會有所幫助:)

來源

2016-02-25 17:43:04 Kinari

如果使用某個類別隱藏使用javascript的div

回答

相關問題