0

この例では、H1 タグがモバイル モードのときにクリック可能なボタンのように動作するようにしようとしています。デスクトップ モードに戻ったら、ボタンをクリックできないようにする必要があります。

ページが最初に「モバイルモード」で読み込まれると、ボタンは適切に機能し、モバイルモードではボタンがクリックごとに起動するようになります。ただし、サイズを変更した後、1.クリックのバインドが解除されず、2.再び複数回発射されるようです。

私はこれを順不同または非効率的に行っていると確信しています。これを行うための他のより良い方法は大歓迎です!

これが私のコードです：

<html>
<head>
<style type="text/css">
.mobile-mode { background: pink; }
.mobile-mode h1 { background: yellow; padding: 10px; text-align: center; font-size: 16px; line-height: 20px; cursor: poi
</style>
<script type="text/javascript" src="/_jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/_jquery/jquery.debouncedresize.js"></script>
<script type="text/javascript" src="/_jquery/jquery.throttledsize.js"></script>
<script type="text/javascript">
$(window).bind("debounced", function() {
        var viewportWidth = $(window).width();
        $('.v-width span').html(viewportWidth);
        if ( viewportWidth < 640 ) {
                $('.device span').html('mobile');
                $('body').addClass('mobile-mode');
                $('h1').click(function() {
                        $('.results').append('<li>Hey!</li>');
                });
        } else {
                $('.device span').html('desktop');
                $('body').removeClass('mobile-mode');
                $('h1').unbind();
        }

});
</script>
</head>
<body>

<div class="v-width">viewport width: <span></span></div>

<div class="device">device: <span></span></div>

<h1>Contextual Header Button</h1>

<ol class="results"></ol>

</body>
</html>
4

1 に答える 1

0

私はばかです。関数を「debouncedresize」と呼ぶべきだったのに、「debounced」と誤って呼び出しました。

于 2013-02-19T19:37:47.547 に答える