使用JQuery在當前幻燈片中添加和洗掉類-有解無憂

晚上好（至少我住的地方；））

我有一個輪播設定。我想從當前幻燈片中洗掉“不可見”類。不幸的是，當談到 JQuery 時，我完全是個菜鳥，而且我很難理解如何正確設定它。

這是片段

HTML

const move = 600;

const margin_reset = (move * -1)   'px'

setInterval(()=>{
  $("#inside-container").animate({
      marginLeft: (move * -2)  "px"
    }, 1800, function() {
      $(this).append( $(this).find('.items:first') )
        .css('margin-left', margin_reset);

        $('items.active').removeClass('active', 'invisible');
        $(this).addClass('active');
  }
  );

}, 4000)

#outside-container{
  display: block;
  width: 600px;
  height: 50vh;
  border: 1px solid #000;
  overflow: hidden;
  margin: 0px auto;
}
#inside-container{
  display: block;
  width: 2400px;
  height: 100%;
  overflow: hidden;
  margin-left: -200px;
}

.items{
  float: left;
  margin: 0px;
  width: 600px;
  height: 100%;
}
#item1{ background: green; }
#item2{ background: red; }
#item3{ background: blue; }
#item4{ background: yellow; }


.carousel-img {
  position: relative;
  width: 100%;
  height: 100%;
}

.invisible {
  display: none;
}


.data-div {
  position: absolute;
  top: 31%;
  left: 19%;
  overflow: hidden;
  color: rgb(255, 255, 255);
  font-weight: 600;
  font-size: large;
}

<div class="main">
  <div id="outside-container">
    <div id="inside-container" class="cf">
      <div class="items" id="item1">
        <div class="data-div invisible">
          <ul>
            <li><b>{{rio_de_janeiro.city}}</b> </li>
            <li>{{rio_de_janeiro.weather.description}}</li>
            <!-- <img src="{{rio_de_janeiro.weather.icon}}" alt="使用 JQuery 在當前幻燈片中添加和洗掉類"> -->
            <li>{{rio_de_janeiro.main.temperature}}</li>
          </ul>
        </div>
        <img src="{% static 'weather/images/cities/' %}{{rio_de_janeiro.city_capitalized}}.jpg" class="carousel-img">
      </div>
      <div class="items active" id="item2">
        <div class="data-div invisible">
          <ul>
            <li><b>{{new_york.city}}</b> </li>
            <li>{{new_york.weather.description}}</li>
            <!-- <img src="{{new_york.weather.icon}}" alt="使用 JQuery 在當前幻燈片中添加和洗掉類"> -->
            <li>{{new_york.main.temperature}}</li>
          </ul>
        </div>
        <img src="{% static 'weather/images/cities/' %}{{new_york.city_capitalized}}.jpg" class="carousel-img">
      </div>
      <div class="items" id="item3">
        <div class="data-div invisible">
          <ul>
            <li><b>{{london.city}}</b> </li>
            <li>{{london.weather.description}}</li>
            <!-- <img src="{{london.weather.icon}}" alt="使用 JQuery 在當前幻燈片中添加和洗掉類"> -->
            <li>{{london.main.temperature}}</li>
          </ul>
        </div>
       <img src="{% static 'weather/images/cities/' %}{{london.city_capitalized}}.jpg" class="carousel-img">
      </div>
      <div class="items" id="item4">
        <div class="data-div invisible">
          <ul>
            <li><b>{{sidney.city}}</b> </li>
            <li>{{sidney.weather.description}}</li>
            <!-- <img src="{{sidney.weather.icon}}" alt="使用 JQuery 在當前幻燈片中添加和洗掉類"> -->
            <li>{{sidney.main.temperature}}</li>
          </ul>
        </div>
       <img src="{% static 'weather/images/cities/' %}{{sidney.city_capitalized}}.jpg" class="carousel-img">
      </div>
    </div>
  </div>

#1 我什至不認為在這種情況下需要添加“活動”類，但老實說，我只是把它扔在那里看看是否有幫助（我知道這是個壞主意，哈哈）

#2 這絕對可以通過使用純 JS 來實作，如果您覺得使用 JS 解決這個問題更舒服，請完全自由地這樣做。我不專注于使用 JQuery

非常感謝您的幫助:)

uj5u.com熱心網友回復：

請參閱：https ://api.jquery.com/removeClass/#removeClass-className

有兩種方法：

從每個匹配元素的類屬性中洗掉一個或多個空格分隔的類。

要從每個匹配元素的類屬性中洗掉的類陣列。

方法一：

const move = 600;

const margin_reset = (move * -1)   'px'

setInterval(() => {
  $("#inside-container").animate({
    marginLeft: (move * -2)   "px"
  }, 1800, function() {
    $(this).append($(this).find('.items:first'))
      .css('margin-left', margin_reset);

    $('items.active').removeClass('active invisible');
    $(this).addClass('active');
  });
}, 4000)

#outside-container {
  display: block;
  width: 600px;
  height: 50vh;
  border: 1px solid #000;
  overflow: hidden;
  margin: 0px auto;
}

#inside-container {
  display: block;
  width: 2400px;
  height: 100%;
  overflow: hidden;
  margin-left: -200px;
}

.items {
  float: left;
  margin: 0px;
  width: 600px;
  height: 100%;
}

#item1 {
  background: green;
}

#item2 {
  background: red;
}

#item3 {
  background: blue;
}

#item4 {
  background: yellow;
}

.carousel-img {
  position: relative;
  width: 100%;
  height: 100%;
}

.invisible {
  display: none;
}

.data-div {
  position: absolute;
  top: 31%;
  left: 19%;
  overflow: hidden;
  color: rgb(255, 255, 255);
  font-weight: 600;
  font-size: large;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <div id="outside-container">
    <div id="inside-container" class="cf">
      <div class="items" id="item1">
        <div class="data-div invisible">
          <ul>
            <li><b>{{rio_de_janeiro.city}}</b> </li>
            <li>{{rio_de_janeiro.weather.description}}</li>
            <!-- <img src="{{rio_de_janeiro.weather.icon}}" alt="使用 JQuery 在當前幻燈片中添加和洗掉類"> -->
            <li>{{rio_de_janeiro.main.temperature}}</li>
          </ul>
        </div>
        <img src="{% static 'weather/images/cities/' %}{{rio_de_janeiro.city_capitalized}}.jpg" class="carousel-img">
      </div>
      <div class="items active" id="item2">
        <div class="data-div invisible">
          <ul>
            <li><b>{{new_york.city}}</b> </li>
            <li>{{new_york.weather.description}}</li>
            <!-- <img src="{{new_york.weather.icon}}" alt="使用 JQuery 在當前幻燈片中添加和洗掉類"> -->
            <li>{{new_york.main.temperature}}</li>
          </ul>
        </div>
        <img src="{% static 'weather/images/cities/' %}{{new_york.city_capitalized}}.jpg" class="carousel-img">
      </div>
      <div class="items" id="item3">
        <div class="data-div invisible">
          <ul>
            <li><b>{{london.city}}</b> </li>
            <li>{{london.weather.description}}</li>
            <!-- <img src="{{london.weather.icon}}" alt="使用 JQuery 在當前幻燈片中添加和洗掉類"> -->
            <li>{{london.main.temperature}}</li>
          </ul>
        </div>
        <img src="{% static 'weather/images/cities/' %}{{london.city_capitalized}}.jpg" class="carousel-img">
      </div>
      <div class="items" id="item4">
        <div class="data-div invisible">
          <ul>
            <li><b>{{sidney.city}}</b> </li>
            <li>{{sidney.weather.description}}</li>
            <!-- <img src="{{sidney.weather.icon}}" alt="使用 JQuery 在當前幻燈片中添加和洗掉類"> -->
            <li>{{sidney.main.temperature}}</li>
          </ul>
        </div>
        <img src="{% static 'weather/images/cities/' %}{{sidney.city_capitalized}}.jpg" class="carousel-img">
      </div>
    </div>
  </div>

方法二：

const move = 600;

const margin_reset = (move * -1)   'px'

setInterval(() => {
  $("#inside-container").animate({
    marginLeft: (move * -2)   "px"
  }, 1800, function() {
    $(this).append($(this).find('.items:first'))
      .css('margin-left', margin_reset);

    $('items.active').removeClass(['active', 'invisible']);
    $(this).addClass('active');
  });
}, 4000)

#outside-container {
  display: block;
  width: 600px;
  height: 50vh;
  border: 1px solid #000;
  overflow: hidden;
  margin: 0px auto;
}

#inside-container {
  display: block;
  width: 2400px;
  height: 100%;
  overflow: hidden;
  margin-left: -200px;
}

.items {
  float: left;
  margin: 0px;
  width: 600px;
  height: 100%;
}

#item1 {
  background: green;
}

#item2 {
  background: red;
}

#item3 {
  background: blue;
}

#item4 {
  background: yellow;
}

.carousel-img {
  position: relative;
  width: 100%;
  height: 100%;
}

.invisible {
  display: none;
}

.data-div {
  position: absolute;
  top: 31%;
  left: 19%;
  overflow: hidden;
  color: rgb(255, 255, 255);
  font-weight: 600;
  font-size: large;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <div id="outside-container">
    <div id="inside-container" class="cf">
      <div class="items" id="item1">
        <div class="data-div invisible">
          <ul>
            <li><b>{{rio_de_janeiro.city}}</b> </li>
            <li>{{rio_de_janeiro.weather.description}}</li>
            <!-- <img src="{{rio_de_janeiro.weather.icon}}" alt="使用 JQuery 在當前幻燈片中添加和洗掉類"> -->
            <li>{{rio_de_janeiro.main.temperature}}</li>
          </ul>
        </div>
        <img src="{% static 'weather/images/cities/' %}{{rio_de_janeiro.city_capitalized}}.jpg" class="carousel-img">
      </div>
      <div class="items active" id="item2">
        <div class="data-div invisible">
          <ul>
            <li><b>{{new_york.city}}</b> </li>
            <li>{{new_york.weather.description}}</li>
            <!-- <img src="{{new_york.weather.icon}}" alt="使用 JQuery 在當前幻燈片中添加和洗掉類"> -->
            <li>{{new_york.main.temperature}}</li>
          </ul>
        </div>
        <img src="{% static 'weather/images/cities/' %}{{new_york.city_capitalized}}.jpg" class="carousel-img">
      </div>
      <div class="items" id="item3">
        <div class="data-div invisible">
          <ul>
            <li><b>{{london.city}}</b> </li>
            <li>{{london.weather.description}}</li>
            <!-- <img src="{{london.weather.icon}}" alt="使用 JQuery 在當前幻燈片中添加和洗掉類"> -->
            <li>{{london.main.temperature}}</li>
          </ul>
        </div>
        <img src="{% static 'weather/images/cities/' %}{{london.city_capitalized}}.jpg" class="carousel-img">
      </div>
      <div class="items" id="item4">
        <div class="data-div invisible">
          <ul>
            <li><b>{{sidney.city}}</b> </li>
            <li>{{sidney.weather.description}}</li>
            <!-- <img src="{{sidney.weather.icon}}" alt="使用 JQuery 在當前幻燈片中添加和洗掉類"> -->
            <li>{{sidney.main.temperature}}</li>
          </ul>
        </div>
        <img src="{% static 'weather/images/cities/' %}{{sidney.city_capitalized}}.jpg" class="carousel-img">
      </div>
    </div>
  </div>

uj5u.com熱心網友回復：

使用 jQuery：

$('items.active').removeClass(['active', 'invisible']);

使用常規 JS：

let element = $('items.active')[0];
//you can also use document.querySelector , document.getElementByID, etc.


element.classList.remove('active', 'invisible');

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/525393.html

標籤：javascripthtmljQuerycss支配权

上一篇：如何使用CSS制作圓角邊框？

下一篇：在InnoSetup中添加4個許可頁面