Question

var d=this.dealer;d<12?(d<5?alert("less than five"):d<9?alert("between 5 and 8"):alert("between 9 and 11")):alert("none");

我的代码是它应该删除属性并在达到宽度时分配给定值＆lt;但是，当我检查元素并将屏幕尺寸设置为iphone 5s（宽度：320px）时，这种情况不会发生。我可以知道它不改变的原因吗？我甚至将body.width（）更改为window.width（）但它不起作用。

Answer 1

由于您将代码附加到resize事件，因此需要调整大小事件才能运行代码。页面加载时不会发生这种情况。您可以删除resize事件处理程序，代码将在页面加载时运行，并查看body宽度是否与断点要求匹配。或者您可以使用命名函数（函数声明）并将其传递给事件处理程序。然后调用named函数最初运行代码，然后等待resize个事件。

如果您只想调用此代码一次，并且您不担心在初始页面加载后视图大小在480px之上和之下发生变化，那么您可以摆脱{{1处理程序并运行你的代码。

如果你想在页面加载后观察视口宽度，并希望在它变为高于或低于resize的任何时候对它做出反应，那么你需要做我以下的事情。

＆＃13;

480px

＆＃13;

var $body   = $( 'body' ),
    $rows   = $( '#skills .row [class*=col-]' ),
    $circle = $( 'circle' ),
    atOrUnderBreakpoint = false;

function onResize( e ) {

  var $width = $body.width();

  if ( $width <= 480 && !atOrUnderBreakpoint ) {

    $circle.attr( {
      cx: 115,
      cy: 80,
      r: 80,
      transform: 'rotate( -84 100 99 )'
    } );
    $rows.toggleClass( 'col-xs-6 col-xs-12' ); // Maybe use addClass() or removeClass() here?

    atOrUnderBreakpoint = true;
    console.log( 1 );

  }

  if ( $width > 480 && atOrUnderBreakpoint ) {

    // Example.
    $circle.attr( {
      cx: 50,
      cy: 50,
      r: 20,
      transform: ''
    } );

    atOrUnderBreakpoint = false;
    console.log( 2 );
  }

}

$( window ).on( 'resize', onResize );
onResize(); // Special case, don't wait for resize event this ONE time, apply right away.

＆＃13;

JSFiddle上面的代码：https://jsfiddle.net/rvmvn1t4/（左右滑动分隔符以更改视口大小）。

我在您的代码中使用<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> <svg viewBox="0 0 100 100" width="100" height="100"> <circle cx="50" cy="50" r="20" fill="transparent" stroke="hotpink" stroke-width="2" /> </svg>事件时遇到的一个问题是使用resize。 toggeClass()被称为很多，resize类将不断添加/删除元素。这将导致这些元素调整大小/闪烁。这里使用col-xs- an example，注意它在两种颜色之间闪烁。你的元素大小可能会发生类似的事情。

我会考虑切换到background-color或addClass()，无论您需要什么，并设置一些可防止您的代码在断点处应用后运行多次的内容（您知道，防止闪烁等）。我在我的例子中使用了一面旗帜。

Answer 2

您可以使用jquery resize函数

$('body').resize(function(){      
    console.log('body dimension changed');
    if ($('body').width() <= 480) {
        $("circle").attr("cx", 115).attr("cy", 80).attr("r", 70).attr("transform", "rotate(-84, 100, 99)");
        $("#skills .row [class*=col-]").toggleClass("col-xs-6 col-xs-12");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

在jquery中达到特定宽度后，类属性不会更改

2 个答案: