响应式jQuery代码-如何仅在窗口调整大小和文档准备就绪时进行部分操纵？

时间：2018-07-17 01:04:09

标签： jquery

我构建了一个jQuery滑块（以及某个网站上的其他内容）。 jQuery滑块具有响应能力，但是响应能力仅在文档就绪时才有效，而在页面加载时则没有。 如果我尝试加载onpageload + document ready，则所有点击功能将永远重复：

jQuery(document).ready(function( $ ){

  var sliderwidth = $(".theslider .wpb_wrapper .idoslider").width();

  if (sliderwidth > 869) {
    var itemwidth = parseInt(sliderwidth, 10)/ 3;
    $(".theslider .wpb_wrapper .idoslider .idoslideritem").css("width", itemwidth);
    var sliderinwidth = parseInt(sliderwidth, 10)* 3;
    var firstpos = parseInt(itemwidth, 10)* 6;
    var endpos = parseInt(firstpos, 10)- 1;
  }
  else if (sliderwidth < 870 && sliderwidth > 579) {
    var itemwidth = parseInt(sliderwidth, 10)/ 2;
    $(".theslider .wpb_wrapper .idoslider .idoslideritem").css("width", itemwidth);
    var sliderinwidth = parseInt(sliderwidth, 10)* 4.5;
    var firstpos = parseInt(itemwidth, 10)* 7;
    var endpos = parseInt(firstpos - itemwidth - 1);
  }
  else {
    $(".theslider .wpb_wrapper .idoslider .idoslideritem").css("width", sliderwidth);
    var itemwidth = sliderwidth;
    var sliderinwidth = parseInt(sliderwidth, 10)* 9;
    var firstpos = parseInt(itemwidth, 10)* 8;
    var endpos = parseInt(firstpos, 10)- 1;
  }

  var leftedge = parseInt(-1);

  $(".theslider .wpb_wrapper .idoslider .sliderin").css({"width": sliderinwidth, "left": -firstpos});

    var sliderheight = $(".theslider .wpb_wrapper .idoslider .idoslideritem").height();
    $(".theslider .wpb_wrapper .idoslider").css("height", sliderheight);

  $(".theslider .wpb_wrapper .idopagination .nexter").click(function() {
  $(this).parent().parent().find(".js-wpv-view-layout .sliderin").animate({ "left": "+=" + itemwidth }, "slow", function() {
  var posn = $(this).position();
    if (posn.left > leftedge) {
      $(this).parent().parent().parent().find(".nexter").css("pointer-events", "none")
      $(this).parent().parent().parent().find(".nexter img").css("filter", "grayscale(100%)")
    }
    else {
      $(this).parent().parent().parent().find(".nexter").css("pointer-events", "initial")
        $(this).parent().parent().parent().find(".nexter img").css("filter", "none")
    }
  if(posn.left < -endpos) {
        $(this).parent().parent().parent().find(".prever").css("pointer-events", "none")
        $(this).parent().parent().parent().find(".prever img").css("filter", "grayscale(100%)")
    }
    else {
        $(this).parent().parent().parent().find(".prever").css("pointer-events", "initial")
        $(this).parent().parent().parent().find(".prever img").css("filter", "none")
    }
  });
  });

  $(".theslider .wpb_wrapper .idopagination .prever").click(function() {
  $(this).parent().parent().find(".js-wpv-view-layout .sliderin").animate({ "left": "-=" + itemwidth }, "slow", function() {
    var posp = $(this).position();
    if(posp.left > leftedge) {
      $(this).parent().parent().parent().find(".nexter").css("pointer-events", "none")
      $(this).parent().parent().parent().find(".nexter img").css("filter", "grayscale(100%)")
    }
  else {
    $(this).parent().parent().parent().find(".nexter").css("pointer-events", "initial")
    $(this).parent().parent().parent().find(".nexter img").css("filter", "none")
  }
    if(posp.left < -endpos) {
      $(this).parent().parent().parent().find(".prever").css("pointer-events", "none")
      $(this).parent().parent().parent().find(".prever img").css("filter", "grayscale(100%)")
    }
  else {
    $(this).parent().parent().parent().find(".prever").css("pointer-events", "initial")
    $(this).parent().parent().parent().find(".prever img").css("filter", "none")
  }
  });
  });
});

如果我只尝试在代码中加载响应部分，那么在第一页加载中就不会加载响应性。

1 个答案:

答案 0 :(得分：0)

知道了！

这个想法是为所有元素创建一个函数，使其出现在窗口调整大小后，然后将它们都放置在函数外部（以加载文档时加载）及其内部：

jQuery(document).ready(function( $ ){

    // SLIDER //

    var sliderwidth = $(".theslider .wpb_wrapper .idoslider").width();

  if (sliderwidth > 869) {
    var itemwidth = parseInt(sliderwidth, 10)/ 3;
    $(".theslider .wpb_wrapper .idoslider .idoslideritem").css("width", itemwidth);
    var sliderinwidth = parseInt(sliderwidth, 10)* 3;
    var firstpos = parseInt(itemwidth, 10)* 6;
    var endpos = parseInt(firstpos, 10)- 1;
  }
  else if (sliderwidth < 870 && sliderwidth > 579) {
    var itemwidth = parseInt(sliderwidth, 10)/ 2;
    $(".theslider .wpb_wrapper .idoslider .idoslideritem").css("width", itemwidth);
    var sliderinwidth = parseInt(sliderwidth, 10)* 4.5;
    var firstpos = parseInt(itemwidth, 10)* 7;
    var endpos = parseInt(firstpos - itemwidth - 1);
  }
  else {
    $(".theslider .wpb_wrapper .idoslider .idoslideritem").css("width", sliderwidth);
    var itemwidth = sliderwidth;
    var sliderinwidth = parseInt(sliderwidth, 10)* 9;
    var firstpos = parseInt(itemwidth, 10)* 8;
    var endpos = parseInt(firstpos, 10)- 1;
  }

  var leftedge = parseInt(-1);

  $(".theslider .wpb_wrapper .idoslider .sliderin").css({"width": sliderinwidth, "left": -firstpos});

    var sliderheight = $(".theslider .wpb_wrapper .idoslider .idoslideritem").height();
    $(".theslider .wpb_wrapper .idoslider").css("height", sliderheight);

  function modifyWidth() {

  var sliderwidth = $(".theslider .wpb_wrapper .idoslider").width();

  if (sliderwidth > 869) {
    var itemwidth = parseInt(sliderwidth, 10)/ 3;
    $(".theslider .wpb_wrapper .idoslider .idoslideritem").css("width", itemwidth);
    var sliderinwidth = parseInt(sliderwidth, 10)* 3;
    var firstpos = parseInt(itemwidth, 10)* 6;
    var endpos = parseInt(firstpos, 10)- 1;
  }
  else if (sliderwidth < 870 && sliderwidth > 579) {
    var itemwidth = parseInt(sliderwidth, 10)/ 2;
    $(".theslider .wpb_wrapper .idoslider .idoslideritem").css("width", itemwidth);
    var sliderinwidth = parseInt(sliderwidth, 10)* 4.5;
    var firstpos = parseInt(itemwidth, 10)* 7;
    var endpos = parseInt(firstpos - itemwidth - 1);
  }
  else {
    $(".theslider .wpb_wrapper .idoslider .idoslideritem").css("width", sliderwidth);
    var itemwidth = sliderwidth;
    var sliderinwidth = parseInt(sliderwidth, 10)* 9;
    var firstpos = parseInt(itemwidth, 10)* 8;
    var endpos = parseInt(firstpos, 10)- 1;
  }

  var leftedge = parseInt(-1);

  $(".theslider .wpb_wrapper .idoslider .sliderin").css({"width": sliderinwidth, "left": -firstpos});

    var sliderheight = $(".theslider .wpb_wrapper .idoslider .idoslideritem").height();
    $(".theslider .wpb_wrapper .idoslider").css("height", sliderheight);

    }

  $(".theslider .wpb_wrapper .idopagination .nexter").click(function() {
  $(this).parent().parent().find(".js-wpv-view-layout .sliderin").animate({ "left": "+=" + itemwidth }, "slow", function() {
  var posn = $(this).position();
    if (posn.left > leftedge) {
      $(this).parent().parent().parent().find(".nexter").css("pointer-events", "none")
      $(this).parent().parent().parent().find(".nexter img").css("filter", "grayscale(100%)")
    }
    else {
    $(this).parent().parent().parent().find(".nexter").css("pointer-events", "initial")
        $(this).parent().parent().parent().find(".nexter img").css("filter", "none")
    }
  if(posn.left < -endpos) {
        $(this).parent().parent().parent().find(".prever").css("pointer-events", "none")
        $(this).parent().parent().parent().find(".prever img").css("filter", "grayscale(100%)")
    }
    else {
        $(this).parent().parent().parent().find(".prever").css("pointer-events", "initial")
        $(this).parent().parent().parent().find(".prever img").css("filter", "none")
    }
  });
  });

  $(".theslider .wpb_wrapper .idopagination .prever").click(function() {
  $(this).parent().parent().find(".js-wpv-view-layout .sliderin").animate({ "left": "-=" + itemwidth }, "slow", function() {
    var posp = $(this).position();
    if(posp.left > leftedge) {
      $(this).parent().parent().parent().find(".nexter").css("pointer-events", "none")
      $(this).parent().parent().parent().find(".nexter img").css("filter", "grayscale(100%)")
    }
  else {
    $(this).parent().parent().parent().find(".nexter").css("pointer-events", "initial")
    $(this).parent().parent().parent().find(".nexter img").css("filter", "none")
  }
    if(posp.left < -endpos) {
    $(this).parent().parent().parent().find(".prever").css("pointer-events", "none")
    $(this).parent().parent().parent().find(".prever img").css("filter", "grayscale(100%)")
    }
  else {
    $(this).parent().parent().parent().find(".prever").css("pointer-events", "initial")
    $(this).parent().parent().parent().find(".prever img").css("filter", "none")
  }
  });
  });

// END //

   $(window).resize(function () {
        modifyWidth();
    });
});
相关问题
最新问题