Question

这是我的标记。我想更新/替换类名col-sm-3 到col-md-6的寡妇上调整大小（例如：宽度<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');

Answer 2

您只需要使用toggle即可达到目标。示例如下：

myLogos.classList.toggle('col-sm-3');
myLogos.classList.toggle('col-md-6');

或

var myLogos = document.querySelectorAll(".llotherlogos-userthumb  .col-sm-3");
var classes = myLogos.classList;

var result = classes.replace("col-sm-3", "col-md-6");
console.log(result);

有关以上内容的更多信息，请访问此link

Answer 3

使用jQuery，您可以执行类似的操作

<script>
    $(window).resize(function () {
        if($(window).width()<800){
            $('.llotherlogos-userthumb').children().removeClass('col-sm-3').addClass('col-md-6');
        }else{
            $('.llotherlogos-userthumb').children().removeClass('col-md-6').addClass('col-sm-3');
        }
    });
</script>

Answer 4

尝试以下jquery代码：

  enter$( window ).resize(function() {
  var ww = document.body.clientWidth;

  <==========now select id or element==============>


  $("#a1").addClass( "my-hidden").removeClass("my-disply");
    // code here
   });

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

4 个答案: