0

理由はわかりませんが、画面幅が 1230 ピクセル未満の場合に印刷されるはずの HTML が表示されません。理由についてのアドバイスを探しています。前もって感謝します！

<script type="text/javascript">
        if (screen.width < 1230) {
           document.write('
           <ul class="navbar-holder">
                <li id="navitem" class="navbaritem-active"><a href="<?php echo 'http://' . $_SERVER['HTTP_HOST']; ?>">home</a></li>
                <li id="navitem" class="navbaritem"><a href="#">about us</a></li>
                <li id="navitem" class="navbaritem"><a href="#">our services</a></li>
                <li id="navitem" class="navbaritem"><a href="#">our work</a></li>
                <li id="navitem" class="navbaritem"><a href="#">blog</a></li>
                <li id="navitem" class="navbaritem"><a href="#">contact us</a></li>
            </ul>
            ');
        }
        else {
            document.write('
            <select class="mobile-page-selector">
                <option>Home</option>
            </select>
            ');
        }
</script>
4

3 に答える 3

2

JavaScript 文字列に改行を含めることはできません。各行の最後にバックスラッシュを付けてエスケープするか、複数の文字列を連結できます。

<script type="text/javascript">
        if (screen.width < 1230) {
           document.write('\
           <ul class="navbar-holder">\
                <li id="navitem" class="navbaritem-active"><a href="<?php echo 'http://' . $_SERVER['HTTP_HOST']; ?>">home</a></li>\
                <li id="navitem" class="navbaritem"><a href="#">about us</a></li>\
                <li id="navitem" class="navbaritem"><a href="#">our services</a></li>\
                <li id="navitem" class="navbaritem"><a href="#">our work</a></li>\
                <li id="navitem" class="navbaritem"><a href="#">blog</a></li>\
                <li id="navitem" class="navbaritem"><a href="#">contact us</a></li>\
            </ul>\
            ');
        }
        else {
            document.write('\
            <select class="mobile-page-selector">\
                <option>Home</option>\
            </select>\
            ');
        }
</script>

代わりに CSS をお勧めできますか? この JavaScript は 1 回しか適用されず、JavaScript で HTML を生成することは通常間違っています。メディア クエリを使用する場合:

@media screen and (max-width: 1230px) {
    .navbar-holder {
        /* Apply some `display: none`s, perhaps */
    }
}

より効率的で使いやすく、JavaScript なしでアクセスでき、ウィンドウのサイズ変更に反応します。

于 2013-11-10T23:53:26.590 に答える
0

PHP はサーバー側、JavaScript はクライアント側、JavaScript はdocument.writeどの PHP でも実行できません。

とはいえ、JavaScript は次の場所に構文エラーがあると考えています。

href="<?php echo 'http://' . $_SERVER['HTTP_HOST']; ?>

'最初の文字列が終了しているため

于 2013-11-10T23:56:39.670 に答える