使用Bootstrap：如何在對象可見時添加類-xs visible-sm？

我一直在試圖找到解決這個問題的方法。我一直無法在網上找到答案。不幸的是我的JavaScript技能不太好。我理解如何做到這一點的基本概念，我唯一的問題是如何調用該輸入，並且只有當它處於可見模式時。使用Bootstrap：如何在對象可見時添加類-xs visible-sm？

<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'); 
      }); 
     });

來源

2017-03-04 Michael_kp1

好的這些答案都沒有解決這個問題。也許我沒有做好解釋自己的工作。基本上我在html頁面上有這些輸入。但是，當使用桌面提交表單時，它仍會嘗試驗證僅限移動設備的輸入，因爲所有這些問題都只是在頁面加載時添加驗證所需的類。我需要找出一種方法，只有在輸入變爲可見時才添加此類。因此，在添加類之前，可能有一種方法可以選擇輸入，並使其可見。 –

你的選擇應該是

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

如果沒有前面的時期，jQuery的不知道你指的CSS類。

來源

2017-03-04 18:10:42 user2182349

刪除逗號，讓你有$（「。mobiledata.visible-xs」） – user2182349

可見sm類，它通過引導添加，並且該動作會在它可見時發出，因此注意[visible-xs visible-sm] 這樣就沒關係，所以關注輸入事件.mobiledateinput添加類驗證，需要與#mobiledateinput這將是所有輸入....

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

    });

我建議使用類而不是ID，因爲ID必須是在頁面的一個元素。

來源

2017-03-04 18:15:21

不幸的是，這並不奏效。它和我一樣手動添加驗證所需的類。這是問題，因爲如果表單在桌面上提交，它仍然會嘗試驗證這些隱藏的輸入。 –

您可以使用CSS技術進行媒體查詢。

例如;

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

我的意思是你可以改變類別的比例。

visible-xs斷點是（max-width：768px）。你可以在bootstrap網站找到所有的斷點。

來源

2017-03-04 18:20:01

使用Bootstrap：如何在對象可見時添加類-xs visible-sm？

回答

相關問題