Question

我编写了一个脚本，根据窗口的宽度从文件中加载一些html。

问题是在某些方面它无法正常工作

<!-- todos -->
    <div *ngIf="todos === undefined; else showTodos"></div>
    <ng-template #showTodos>

        <!-- todo dragular bag -->
        <div [dragula]='"todo-bag"' [dragulaModel]='todos' class="todo-bag">

            <div class="card card-outline-primary mt-3 todo-card-part" *ngFor="let todo of todos">
                <div *ngIf="selectedTodo === undefined || selectedTodo._id !== todo._id; else showTodoUpdateForm">

                    <div class="card-title todo-card-part">

                        <!-- title -->
                        <h4 class="ml-2 mt-2 todo-card-part">
                            {{ todo.title }}
                            <i class="fa fa-trash text-danger todo-card-part" aria-hidden="true" (click)="deleteTodo(todo)"></i>
                            <i class="fa fa-pencil text-info todo-card-part" aria-hidden="true" (click)="selectTodo(todo)"></i>
                        </h4>

                        <!-- details -->
                        <p class="ml-2 mt-2 todo-card-part">{{ todo.details }}</p>

                    </div>
                </div>

                <!-- update form -->
                <ng-template #showTodoUpdateForm>

                    <!-- form -->
                    <form (ngSubmit)="updateTodo()" #todoUpdateForm="ngForm" class="form todo-update-form">

                        <!-- title -->
                        <div class="form-group">
                            <label for="todoTitle"></label>
                            <input type="text" name="title" [(ngModel)]="selectedTodo.title" placeholder="title" id="todoTitle" required>
                        </div>

                        <!-- details -->
                        <div class="form-group">
                            <label for="todoTitle"></label>
                            <textarea rows="5" cols="20" name="details" [(ngModel)]="selectedTodo.details" placeholder="details" id="details"></textarea>
                        </div>

                        <!-- submit -->
                        <button type="submit" [disabled]="!todoUpdateForm.form.valid" class="btn btn-success">Update</button>

                    </form>
                </ng-template>

            </div>
        </div>
    </ng-template>

所以问题出现在宽度

1281px至1295px - 加载tab.html但应加载sektop.html
770px 785px - 加载mobile.html但应加载tab.html

请帮忙

Answer 1

您需要将所有内容都包含在$(window).on('load resize', function() { ... });事件处理程序中，以便此代码在页面load和resize事件时运行。

我还会在某个地方跟踪状态，这样如果您要加载的内容已经在页面上，那么您就不会不必要地触发$.load()。

＆＃13;

var $body = $('body');

    $(window).on('load resize', function() {
      
      var winWidth = $(this).width(),
          state = $body.data('state');

      console.log(winWidth);

      if ((winWidth > 0) && (winWidth <= 767) && (state != 'mobile')) {
        $body.data('state','mobile');
        console.log('Mobile');
        $.ajax({
          url: "home-banner-parts/mobile.html",
          dataType: "html",
          success: function(data) {
            $("#homeslider").html(data);
          }
        });
      }
      if ((winWidth >= 768) && (winWidth <= 1279) && (state != 'tab')) {
        $body.data('state','tab');
        console.log('Tab');
        $.ajax({
          url: "home-banner-parts/tab.html",
          dataType: "html",
          success: function(data) {
            $("#homeslider").html(data);
          }
        });
      }
      if ((winWidth >= 1280) && (state != 'desktop')) {
        $body.data('state','desktop');
        console.log('Desktop');
        $('bo')
        $.ajax({
          url: "home-banner-parts/desktop.html",
          dataType: "html",
          success: function(data) {
            $("#homeslider").html(data);
          }
        });
      }
    })

＆＃13;

body {
overflow-y: scroll;
min-height: 200vh;
}

＆＃13;

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

＆＃13;

Answer 2

代码失败的像素范围指向滚动条宽度。

实际上，您需要使用window.innerWidth来获取实际使用的视口。

所以var winWidth = window.innerWidth;

最后你应该在dom准备就绪时给你调用代码，所以

function handleWindowSize(){
   // your code here
}
$(window).resize(function() {
    console.log('Resizing');
    handleWindowSize();
    homeCarousel();
});
$(document).ready(function(){
    $(window).trigger('resize');
})

jquery窗口宽度在某些断点处不起作用

2 个答案: