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

【问题标题】：Using Bootstrap: How to add a class when object is visible-xs visible-sm?使用 Bootstrap：当对象为可见-xs 可见-sm 时如何添加类？
【发布时间】：2017-07-24 18:42:15
【问题描述】：

我一直在努力寻找解决这个问题的方法。我一直无法在网上找到任何答案。不幸的是，我的 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');
            });
        });

【问题讨论】：

好的，这些答案都没有解决这个问题。也许我没有很好地解释自己。基本上我在 html 页面上有这些输入。但是当使用桌面提交表单时，它仍然会尝试验证仅限移动设备的输入，因为所有这些问题都只是在页面加载时添加了 validate-required 类。我需要找出一种方法，仅在输入可见时才添加此类。所以也许有一种方法可以在添加类之前选择输入，使其可见。

标签： javascript html forms twitter-bootstrap

【解决方案1】：

你的选择器应该是

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

如果前面没有句点，jQuery 不知道你指的是 CSS 类。

【讨论】：

好的，这些答案都没有解决这个问题。也许我没有很好地解释自己。基本上我在 html 页面上有这些输入。但是当使用桌面提交表单时，它仍然会尝试验证仅限移动设备的输入，因为所有这些问题都只是在页面加载时添加了 validate-required 类。我需要找出一种方法，仅在输入可见时才添加此类。所以也许有一种方法可以在添加类之前选择输入，使其可见。
去掉逗号，得到 $(".mobiledata.visible-xs")

【解决方案2】：

visible-sm 类，它是通过引导添加的，当它可见时动作会做，所以没关系注意 [ visible-xs visible-sm ] 所以专注于输入的事件，以便使用#mobiledateinput 向所有输入添加类 validate-required 它将是....

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

  });

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

【讨论】：

不幸的是，这不起作用。它与我手动添加验证所需类的功能相同。这是问题所在，因为如果在桌面上提交表单，它仍然会尝试验证这些隐藏的输入。

【解决方案3】：

您可以使用媒体查询，这是一种 CSS 技术。

例如；

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

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

visible-xs 断点为 (max-width: 768px)。您可以在 bootstrap 网站中找到所有断点。

【讨论】：

好的，这些答案都没有解决这个问题。也许我没有很好地解释自己。基本上我在 html 页面上有这些输入。但是当使用桌面提交表单时，它仍然会尝试验证仅移动设备的输入，因为所有这些问题都只是在页面加载时添加了 validate-required 类。我需要找到一种方法，仅在输入可见时才添加此类。所以也许有一种方法可以在添加类之前选择输入，使其可见。