Question

我一直试图找到解决这个问题的方法。我无法在网上找到任何答案。不幸的是我的javascript技能不太好。我理解如何做到这一点的基本概念，我唯一的问题是如何调用该输入，并且仅当它处于可见模式时。

<div class="col-sm-6 visible-xs visible-sm">
       <label for="date">Desired Date:</label>
       <input name="date" type="date" id="mobiledateinput">
</div>

我知道这需要以某种方式用javascript解决。我尽可能接近

$(document).ready(function(){
                $("mobiledateinput, visible-xs").each( function () {
                $(this).addClass('validate-required');
            });
        });

Answer 1

你的选择者应该是

$(".mobiledateinput, .visible-xs")

如果你没有前面的句号，jQuery不知道你正在引用CSS类。

Answer 2

visible-sm类，它通过bootstrap添加，当它可见时动作会生成所以注意[visible-xs visible-sm]并不重要所以关注输入的事件，以便使用#mobiledateinput为所有输入添加类验证 - 它将是....

  $(document).ready(function(){
            $("#mobiledateinput").each( function () {
                 var $this  = $(this) //to cash this object in the var $this
                 $this.addClass('validate-required');
        });

  });

我建议使用类.mobiledateinput而不是ID，因为ID必须是页面中的一个元素。

Answer 3

您可以使用CSS技术的媒体查询。

例如;

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}

我的意思是你可以改变班级比例。

visible-xs断点是（max-width：768px）。您可以在bootstrap网站中找到所有断点。

使用Bootstrap：当对象可见时如何添加类-xs visible-sm？

3 个答案: