当行包含一定数量的列时调用javascript函数答案

【问题标题】：Call javascript function, when row contains certain amount of columns当行包含一定数量的列时调用javascript函数
【发布时间】：2021-05-09 16:31:40
【问题描述】：

我正在开发一个 MVC 应用程序。其中一页包含一行和两列。

当您将窗口调整到一定宽度时，它会自动将第二列放在第一列之下。

我正在使用引导网格系统来实现这一点。

        <div class="row">
            <div id="draftContainer" class="col-md-6 col-sm-6 col-lg-6">
                ...
                (Some content)
                ...
            </div>
            <div id="releaseContainer" class="col-md-6 col-sm-6 col-lg-6" >
                ...
                (Some other content)
                ...

            </div>
        </div>

我想知道当第二列低于第一列时是否有可能以某种方式触发事件，然后调用 javascript 函数。

情况是，我有一些 CSS 类应该添加和删除，具体取决于是一列还是两列。

希望你能明白。

提前致谢

【问题讨论】：

听起来你需要媒体查询
你需要解释一下
Look it up.

标签： javascript html css asp.net-mvc twitter-bootstrap

【解决方案1】：

run1Style = '<style>#draftContainer{background:#d8ffc0} #releaseContainer{background:#eee}</style>';
run2Style = '<style>#draftContainer{background:#eee} #releaseContainer{background:#d8ffc0}</style>';

function control(){
  if($('#controlDM:visible').length == 0){
    $('#appendStyle').append(run1Style);
  }else{
    $('#appendStyle').html(run2Style);
  }
}

//first run
control();

$(document).ready(function() {
  $(window).resize(function(){
    control();
  });
});

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="row">
  <div id="draftContainer" class="col-md-6 column ui-sortable">
    <div  id="controlDM" class="d-none d-md-block"></div>
    1111
  </div>
  <div id="releaseContainer" class="col-md-6 column ui-sortable">
    2222
  </div>

  <div id="appendStyle"></div>

</div>

【讨论】：

【解决方案2】：

我想帮忙

https://codepen.io/sinandogan/pen/YzpwvRL

<div class="row">
    <div id="draftContainer" class="col-md-6 col-sm-6 col-lg-6">
        ...
        (Some content)
        <input type="hidden" id="css1" value="<style>#draftContainer{background:#d8ffc0} #releaseContainer{background:#eee}</style>" />
        ...
    </div>
    <div id="releaseContainer" class="col-md-6 col-sm-6 col-lg-6" >
        ...
        (Some other content)
        <input type="hidden" id="css2" value="<style>#draftContainer{background:#eee} #releaseContainer{background:#f44336}</style>" />
        ...

    </div>
</div>
<div id="appendStyle"></div>

<script> 
  function control(){
    if($('body').width() > 766){
        $('#appendStyle').html($('#css1').val());
    }else{
        $('#appendStyle').html($('#css2').val());
    }
  }
  
  //first run
  control();
  
  $(document).ready(function() {
    $(window).resize(function(){
        control();
    });
  });
  </script>

【讨论】：