3

JQuery を使用する場合、ドロップダウン ボックスやボタンなどの一部の UI 要素は、JavaScript で値を変更すると、UI が自動的に更新されません。値は正しく更新されていますが、画面上では何も変わっていないように見えます。これを修正するには、値を変更した後に Jquery で「更新」メソッドを使用する必要があります。このページでは、情報と構文を見つけることができます: http://jquerymobile.com/test/docs/forms/docs-forms.html (「フォーム要素の更新」まで下にスクロールします)

一部の html 要素、特にボタンやリスト ボックス (選択/オプション) でテキストが正しく更新されないという問題があります。これは自動的に行われるはずですが、テキストが以前の値のままになることがあります。テキストまたは innerHTML の値は正しいですが、表示されません。

これがボタンの問題です。Javascriptを使用してinnerHTMLを取得し、変更します。

HTML マークアップ:

<button id="btn" onclick"simple_function">A</button>

Javascript:

function simple_function()
{
    var anArray = aFunctionThatReturnAnArray();
    document.getElementById("btn").innerHTML = anArray[0];
}

アラート メッセージを使用することで、変更前後の値を確認できます。これらの警告メッセージは正しいです。クリック後の値は確かに anArray[0] の値ですが、ブラウザのボタンのテキストは変化せず、「A」のままです。このボタンでイライラするのは、テキストが変更されることがありますが、最初に html を変更したときだけです (これは、ボタンが初めてユーザーに表示される直前に発生します)。後で関数を追加で呼び出しても、テキストは変更されません。ただし、警告メッセージによって確認されるように、innerHTML は変更されています。したがって、すべてが「機能」し続けますが、ボタンのテキストが変更されて表示されないため、ユーザーは実際に何をクリックしているのかわかりません。

ボタンの innerHTML として < span > を使用し、スパンの innerHTML を配列内の値に変更することで、これを修正しました。これは機能します。innerHTML が変更されるたびに、画面に表示されます。解決策はありますが、回避策にすぎず、何が原因なのか知りたいですか?

リストボックスにも同様の問題があります。デフォルト値は「毎日」です。(以下の完全なコードを参照してください)。

document.getElementById("interval_list").selectedIndex

と

document.getElementById("interval_list").selectedIndex = 3;

繰り返しますが、関数内の値は常に正しいですが、selectedIndex が 3 であると関数が示している場合でも、ドロップダウンのテキストは毎日表示されたままになります (「決して」ではないはずです)。< span > を追加してもこれを修正できないので、ここで立ち往生しています。

いくつかのコメント:

  • html に重複する ID はありません (チェックには find を使用します)
  • フッターのボタンではこの問題は発生せず、段落、スパン、またはヘッダーでも発生しません。
  • fiddle と wc3 の tryit エディターで同様のコードをコピーしようとしましたが、そこで動作します。では、単純な関数の外にあるもので、バグが発生しているに違いありませんか?
  • ブラウザの互換性を確認しています: それは問題ではありません (私は IE を使用していません)。

リスト ボックスの完全なコード:

        <div class="ui-grid-a">

            <div class="ui-block-a">

                <p style="padding-right: 1em; padding-top: 0.4em;" align="right">AUTO REMIND</p>
                <p style="padding-right: 1em; padding-top: 1em;" align="right">INTERVAL</p>

            </div>

            <div class="ui-block-b">

                <div id="auto_remind_radio_buttons" data-role="controlgroup" data-type="horizontal">

                    <input type="radio" onclick="document.getElementById('interval_list').selectedIndex = 0;" name="auto_remind_button" id="auto_remind_on" value="male"/>
                    <label for="auto_remind_on"><img src="images/correct.png" alt="NO" width="26" height="21"></label>
                    <input type="radio" onclick="document.getElementById('interval_list').selectedIndex = 3;" name="auto_remind_button" id="auto_remind_off" value="female"/>
                    <label for="auto_remind_off"><img src="images/wrong.png" alt="NO" width="26" height="21"></label>

                </div>

                <select id="interval_list" name="Single-line ListBox example">

                    <option id="1" value="1">daily</option>
                    <option id="2" value="2">weekly</option>
                    <option id="3" value="4">monthly</option>
                    <option id="4" value="5">never</option>

                </select>

            </div>

        </div>
4

2 に答える 2

2

document.getElementById("btn").innerHTML=

あなたのケースに注意してください-HTMLは大文字にする必要があります。

于 2012-12-14T05:48:56.033 に答える
0

答えよりもコメントが多い。次のコードを使用します。

<button id="b0">b0</button>
<button id="b1" onclick="
  document.getElementById('b0').innerHTML = 'foo';
">click me</button>

ボタンのinnerHTMLはFFとIE8で変更されていますが、どのブラウザを使用していますか？

selectの問題についても同じですが、IE8とFFでは次のように機能します。

<select id="sel0">
  <option>Sunday
  <option>Monday
  <option>Tuesday
  <option>Wednesday
</select>

<button onclick="
  document.getElementById('sel0').selectedIndex = 1;
">Select Monday</button>

<button onclick="
  document.getElementById('sel0').selectedIndex = 3;
">Select Wednesday</button>
于 2012-12-14T06:30:05.303 に答える