jQuery的调整大小功能不起作用

Question

不知道我缺少什么，我确定它在以前工作过：-(但是我看不到问题。

我需要我的功能wrapContent可以调整大小。

• 当<800px时，该功能应将我的跨度转换为选择选项标签。
• > 800时应该像以前一样返回。

http://jsfiddle.net/1ze02dr2/

 var $window = $(window); var windowsize = $window.width(); var body = $('html, body'); function wrapContent() { if (windowsize < 800) { $('.pick-country > span').replaceWith(function () { return $('<option/>').text($(this).text()).attr('value', $(this).data('id')); }); var select = $('.pick-country > option').wrapAll('<select class="country-list"></select>'); } } wrapContent(); $(window).resize(wrapContent); $('select.country-list').on("change", function () { if ($(this).val()) { body.animate({ scrollTop: $('#' + $(this).val()).offset().top - 63 }, 'slow'); } }); $('.hotspot').on("click", function (e) { e.preventDefault(); body.animate({ scrollTop: $('#' + $(this).data('id')).offset().top - 63 }, 'slow'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="pick-country"> <div class="country">PICK A COUNTRY</div> <span data-id="London" class="London hotspot">London</span> <span data-id="CapeTown" class="CapeTown hotspot">Cape Town</span> <span data-id="Beijing" class="Beijing hotspot">Beijing</span> <span data-id="Tokyo" class="Tokyo hotspot">Tokyo</span> <span data-id="HongKong" class="HongKong hotspot">Hong Kong</span> <span data-id="KualaLumpur" class="KualaLumpur hotspot">Kuala Lumpur</span> <span data-id="Singapore" class="Singapore hotspot">Singapore</span> <span data-id="Mumbai" class="Mumbai hotspot">Mumbai</span> <span data-id="Shanghai" class="Shanghai hotspot">Shanghai</span> <span data-id="Sydney" class="Sydney hotspot">Sydney</span> <span data-id="StPetersburg" class="StPetersburg hotspot">St. Petersburg</span> <span data-id="SanPaulo" class="SanPaulo hotspot">São Paulo</span> <span data-id="SanFrancisco" class="SanFrancisco hotspot">San Francisco</span> <span data-id="Dallas" class="Dallas hotspot">Dallas</span> <span data-id="NewYork" class="NewYork hotspot">New York</span> <span data-id="Dubai" class="Dubai hotspot">Dubai</span> </div> <div id="London">London</div> <br> <br> <br> <div id="CapeTown">Cape Town</div> <br> <br> <br> <div id="Beijing">Beijing</div> <br> <br> <br> <div id="Tokyo">Tokyo</div> <br> <br> <br> <div id="HongKong">Hong Kong</div> <br> <br> <br> <div id="KualaLumpur">Kuala Lumpur</div> <br> <br> <br> <div id="Singapore">Singapore</div> <br> <br> <br> <div id="Mumbai">Mumbai</div> <br> <br> <br> <div id="Shanghai">Shanghai</div> <br> <br> <br> <div id="Sydney">Sydney</div> <br> <br> <br> <div id="StPetersburg">St. Petersburg</div> <br> <br> <br> <div id="SanPaulo">São Paulo</div> <br> <br> <br> <div id="SanFrancisco">San Francisco</div> <br> <br> <br> <div id="Dallas">Dallas</div> <br> <br> <br> <div id="NewYork">New York</div> <br> <br> <br> <div id="Dubai">Dubai</div> 

Answer 1

改变这个：

if (windowsize < 800) {

对此：

if ($window.width() < 800) {

---

在我看来，问题是您的var windowsize在doc准备就绪时不在函数范围内。 因此，当窗口调整大小时，它永远不会获得更新的值。

我猜你需要这个：

var $window = $(window);
var windowsize = $window.width();
var body = $('html, body');
var spans = $('.pick-country').html(); //<----cache it here

function wrapContent() {
  if ($window.width() < 800) {
    $('.pick-country > span').replaceWith(function() {
      return $('<option/>').text($(this).text()).attr('value', $(this).data('id'));
    });
    var select = $('.pick-country > option').wrapAll('<select class="country-list"></select>');

  } else {
    $('.pick-country').html(spans); // replace the old content here
  }
}

更新的小提琴