jquery resize函数不起作用

Question

不确定我错过了什么，我确定它之前有效:-( 但是我无法看到这个问题。

我需要我的函数wrapContent可以调整大小。

• 何时＆lt; 800px函数应该将我的范围转换为选择选项标记。
• 当＆gt; 800应该像以前一样回归。

http://jsfiddle.net/1ze02dr2/

＆＃13;

＆＃13;

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');
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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
  }
}

Updated Fiddle