Question

我希望在屏幕尺寸等于768px时单击下一个按钮时执行以下代码。问题是当我想要改变屏幕尺寸时，它不会回到原来的风格：

  $(document).ready(function() {
    alert();
    $(".billing-information").hide();
    $(".services-information").css("display", "none");
    $("#next").click(function() {
      alert();
      var mq = window.matchMedia("(max-width: 767px)");
      if (mq.matches) {
        $(".services").css("display", "block");
        $(".personal-detail").css("display", "none");
        $(".personal-detail").removeClass("give-color");
        $(".services").addClass("give-color");
        $(".personal-detail").css({ "opacity": "0.5", "color": "black" });
        $(".services").css({ "opacity": "1", "color": "#fff" });
      } else {
          $(".personal-detail").removeClass("give-color");
          $(".services").addClass("give-color");
          $(".personal-detail").css({ "opacity": "0.5", "color": "black" });
          $(".services").css({ "opacity": "1", "color": "#fff" });
      }
    });

Answer 1

window.matchMedia()方法：

运行指定的CSS媒体查询，并将其与当前窗口状态一次进行比较。要以响应方式使用window.matchMedia（），只要窗口状态发生变化，您的代码就会对CSS媒体查询做出反应，您可以使用它的方法/事件处理程序。

更多www.w3schools.com/win_matchmedia。

要为状态更改添加事件侦听器，请执行以下操作：

// media query handler function
function myCSS_handler(x)
{
    if (x.matches)
    {  
       // the screen width is less or equal to 767px
       $(".services").css("display", "block");
       $(".personal-detail").css("display", "none");
       $(".personal-detail").removeClass("give-color");
       $(".services").addClass("give-color");
       $(".personal-detail").css({ "opacity": "0.5", "color": "black" });
    }
    else
    {
       // the screen width is greater than 767px
       $(".personal-detail").removeClass("give-color");
       $(".services").addClass("give-color");
       $(".personal-detail").css({ "opacity": "0.5", "color": "black" });
       $(".services").css({ "opacity": "1", "color": "#fff" });
    }
}

// on DOM ready
$(document).ready(function()
{
    $(".billing-information").hide();
    $(".services-information").css("display", "none");

    $("#next").click(function()
    {
        var x = window.matchMedia("(min-width: 767px)")
        myCSS_handler(x) // Call listener function on button press
        x.addListener(myCSS_handler) // Attach listener function on state changes
    });
});

或者您可以在没有window resize function的情况下使用这样的media queries（我添加了一些示例函数，因此代码更具可读性）：

// function to handle CSS on screen width change
function dynamic_CSS()
{
   // get window width
   var width = $( window ).width();
   // alert("window width is " + width);

   // if width is less or equal to 767px call function widthFrom_0_to_767()
   if(width <= 767) widthFrom_0_to_767();
   else if(width > 767 && width <= 990) widthFrom_767_to_990();
   else if(width > 990 && width <= 1300) widthFrom_990_to_1300();
   else if(width > 1300 && width <= 1600) widthFrom_1300_to_1600();
   else widthFrom_above_1600();
}

// example function for screen width up to 767px
function widthFrom_0_to_767()
{
   $(".personal-detail").removeClass("give-color");
   $(".services").addClass("give-color");
   // ...
}

// on DOM ready
$(document).ready(function()
{
     $(".billing-information").hide();
     $(".services-information").css("display", "none");

     // calls it upon click
     $("#next").click(function()
     {
         dynamic_CSS();
     });

     // on window resize
     $(window).resize(function() 
     {
         // also calls it upon window resize
         dynamic_CSS();
     });
});

Answer 2

如果您将逻辑放在一个函数中，只要屏幕调整大小并且用户单击下一个按钮，您就可以调用它：

$( document ).ready( function () {
    alert();
    $( ".billing-information" ).hide();
    $( ".services-information" ).css( "display", "none" );
    $( "#next" ).click( next_button_function );
    $( window ).on( 'resize', next_button_function );


    var next_button_function = function () {
        alert();
        var mq = window.matchMedia( "(max-width: 767px)" );
        if ( mq.matches ) {
            $( ".services" ).css( "display", "block" );
            $( ".personal-detail" ).css( "display", "none" );
            $( ".personal-detail" ).removeClass( "give-color" );
            $( ".services" ).addClass( "give-color" );
            $( ".personal-detail" ).css( {
                "opacity": "0.5",
                "color": "black"
            } );
            $( ".services" ).css( {
                "opacity": "1",
                "color": "#fff"
            } );
        } else {
            $( ".personal-detail" ).removeClass( "give-color" );
            $( ".services" ).addClass( "give-color" );
            $( ".personal-detail" ).css( {
                "opacity": "0.5",
                "color": "black"
            } );
            $( ".services" ).css( {
                "opacity": "1",
                "color": "#fff"
            } );
        }

    }

使用jQuery的媒体查询时出错

2 个答案: