javascript - 在窗口调整大小时替换类名

Question

这是我的标记。我想更新/替换类名 col-sm-3 到 col-md-6 on widow resize (ex: width < 800)

<div class="llotherlogos-userthumb">
            <div class="col-sm-3">
                <div class="logo-thumb">
                    <img class="img-fluid" src="images/logos/logo-seven.jpg" alt="">
                    <div class="logo-caption">
                        <div class="ll-category">Business</div>
                        <div class="ll-price"><span>1000BDT</span>5000 BDT</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="logo-thumb">
                    <img class="img-fluid" src="images/logos/logo-eight.jpg" alt="">
                    <div class="logo-caption">
                        <div class="ll-category">Business</div>
                        <div class="ll-price"><span>1000BDT</span>5000 BDT</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="logo-thumb">
                    <img class="img-fluid" src="images/logos/logo-nine.jpg" alt="">
                    <div class="logo-caption">
                        <div class="ll-category">Business</div>
                        <div class="ll-price"><span>1000BDT</span>5000 BDT</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="logo-thumb">
                    <img class="img-fluid" src="images/logos/logo-ten.jpg" alt="">
                    <div class="logo-caption">
                        <div class="ll-category">Business</div>
                        <div class="ll-price"><span>1000BDT</span>5000 BDT</div>
                    </div>
                </div>
            </div>
        </div>

JavaScript

var otherlogos = function(){

    var ww = document.body.clientWidth;

  var myLogos = document.querySelectorAll(".llotherlogos-userthumb  .col-sm-3");
   if(ww < 800){
    myLogos.className.replace(col-sm-3, col-md-6);

  }
}

window.onresize = otherLogos;

Answer 1

你需要这个:

myLogos.className.replace(col-sm-3, col-md-6);

成为:

myLogos[0].classList.replace('col-sm-3', 'col-md-6');

(querySelectorAll 返回一组元素，即使只有一个元素匹配，因此需要 myLogos[0]。)

要对多个元素执行此操作，您需要这样的东西(显式 for 循环，因为我认为 foreach 在这里不起作用):

for (let i = 0; i < myLogos.length; ++i)
  myLogos[i].classList.replace('col-sm-3', 'col-md-6');