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

Question

我有一个网站在屏幕上播放 CSS 云飘过的动画。

然后我添加了一个 javascript 函数，可以从 Yahoo 的天气 api 中提取数据。我用它来根据天气改变背景颜色。我想要它，所以我现在拥有的云动画仅在多云时出现（也就是 javascript 使 body class 'body.cloudy' 或 'body.partly-cloudy').

目前云在 div 中，所以我假设我需要制作它以便在 body 不是 'body.cloudy' 或 'body.partly-cloudy' 时隐藏 div 但是我不知道该怎么做。

<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();
}

希望对您有所帮助:)

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

Hiding divs using javascript if a certain class is used

javascript

jquery

html

css

yahoo-weather-api