1

javascript を使用して新しい要素 (ボタン) を html ファイルに追加しようとしています。作業スクリプトは次のとおりです。

<div id="examples">
    <?php
    while ($row=mysql_fetch_array($result))
    {?>
    <script type="text/javascript">
        var element = document.createElement("input");
        element.type = "button";
        element.value = "Click me";
        element.id = <?=$row['id'];?>;

        var foo = document.getElementById("examples");
        foo.appendChild(element);
    </script>

    <?php
    }
    ?>
</div>

html ファイルに新しい要素を追加するスクリプトですが、一部のプロパティ (ボタンのサイズなど) も変更したいと思います。

メソッドSetProperties(id, fontSize)があり、要素を作成する必要があるときにコードに追加すると、機能せず、その新しい要素も作成されません。頭痛の種になるコードは次のとおりです。

<div id="examples">
    <?php
    while ($row=mysql_fetch_array($result))
    {?>
    <script type="text/javascript">
        var element = document.createElement("input");
        element.type = "button";
        element.value = "Click me";
        element.id = <?=$row['id'];?>;

        var foo = document.getElementById("examples");
        foo.appendChild(element);

        *SetProperties(<?=$row['id'];?>, <?=$row['fontSize'];?>);*
    </script>

    <?php
    }
    ?>
</div>

そして、新しい要素のプロパティを変更する関数は次のとおりです。

<script type="text/javascript">
function SetProperties(id, fontSize)
{
    var btn = document.getElementById(id);
    btn.style.fontSize = fontSize + "px;";
}
</script>
4

5 に答える 5

0 
You may try like this to avoid creating `buttons` at `client` side

<div id="examples">
        <?php
        while ($row=mysql_fetch_array($result))
        {?>
            <input type="button" value="Click me" id="<?=$row['id'];?>" style="font-size: 25px;" />
        <?php } ?>
    </div>
于 2013-05-24T21:06:35.453 に答える
0

あなたはこのように試すことができます

<style>
#examples [type=button]
{
    font-size:25px;
}
</style>

<div id="examples">
    <?php
    while ($row=mysql_fetch_array($result))
    {?>
    <script type="text/javascript">
        var element = document.createElement("input");
        element.type = "button";
        element.value = "Click me";
        element.id = <?=$row['id'];?>;

        var foo = document.getElementById("examples");
        foo.appendChild(element);

    </script>

    <?php
    }
    ?>
</div>
于 2013-05-24T20:29:17.717 に答える
0

コードについては、ID に文字列のみを使用してみてください。

 element.id = "<?=$row['id'];?>";

 /* ... */

 SetProperties("<?=$row['id'];?>");

getElementById文字列を期待するためです。場合によっては、JavaScript で数値を文字列にキャストできますがgetElementById、ブラウザーでの実装方法によって異なります。

それに加えて、あなたが行っているコードは、はるかに優れた方法で実装できます。

  • HTMLを直接出力する
  • CSS を使用してスタイルを変更する
  • たとえばデータベース ID を参照できるように、ボタンにメタデータを関連付ける必要がある場合はdata、ID をいじる代わりに属性を使用します。

例えば：

<div id="examples">
   <?php
     while ($row=mysql_fetch_array($result)) {?>
       <button class="do-something" data-row-id="<?=$row['id'];?>">Click me</button>
     <?php
     }
     ?>
</div>

次にCSSで：

.do-something { /* set CSS properties */ }

また、クリック ハンドラーを追加する必要があり、多数のボタンがある場合は、ハンドラーをボタンのコンテナーに割り当てることができます (例では jQuery を使用しています)。

 $('#examples').on('click', '.do-something', function () { /* handler */ });

これは、ボタンごとにクリック ハンドラーを割り当てるよりも効率的です。

于 2013-05-24T20:43:12.060 に答える
0 
<script type="text/javascript">
function SetProperties(id)
{
    document.getElementById(id).style.fontSize = 25 + "px";
}
</script>

<div id="examples">
    <?php
    while ($row=mysql_fetch_array($result))
    {?>
    <script type="text/javascript">
        var element = document.createElement("input");
        element.type = "button";
        element.value = "Click me";
        element.id = <?=$row['id'];?>;

        var foo = document.getElementById("examples");
        foo.appendChild(element);

        SetProperties(<?=$row['id'];?>, <?=$row['fontSize'];?>);
    </script>

    <?php
    }
    ?>
</div>
于 2013-05-24T20:45:06.757 に答える
0

私は@meagarに同意します-サーバー上ですべてを実行できるのに、なぜJavaScriptを発行するのですか?

クライアント側で要素を追加する JavaScript を発行する代わりに、サーバー側で要素を直接追加する方法を次に示します。

<div id="examples">
    <?php
    while ($row=mysql_fetch_array($result))
    {?>
        <input type="button" value="Click me" id="<?=$row['id'];?>" />
    <?php } ?>
</div>

スタイルを設定するには、これを<head>または CSS ファイルに入れます。

<style>
    #examples input {
        font-size: 25px;
    }
</style>
于 2013-05-24T20:47:44.823 に答える