Question

我有一个网站，可以在屏幕上播放云彩的CSS动画。

然后我添加了一个javascript函数，从Yahoo的天气api中提取数据。我根据天气使用它来改变背景颜色。我想这样，所以我现在只有云端动画才会出现云动画（也就是当javascript使得身体分级为＆＃39; body.cloudy＆＃39;或者＃body; partly-cloudy＆＃39 ;）

此刻云层在div中，所以我认为我需要做到这一点，如果身体不是“body.cloudy”，那么div就会被隐藏起来。或者＆＃39; body.partly-cloudy＆＃39;但我不知道该怎么做。

<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>

JS

$.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;
}

Answer 1

我认为这个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;
}

Answer 2

您可以使用hasClass()

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

希望这会有所帮助：）

如果使用某个类，则使用javascript隐藏div

2 个答案: