1

IE9 で簡単な機能を動作させるのに苦労しています。Chrome と FF で完全に動作します。目的は、2 つの「ul」リストを作成し、クリック時にそれらの間で「li」要素を移動することです。最初のコンテナー (MultiListAvailableElements) に青色の背景を持つ li 要素を配置し、マウス オーバーで緑色に変更したいと考えています。2 番目のコンテナー (MultiListSelectedElements) の反対側 - 緑の背景、マウス オーバーで青に変わります。

問題は、IE9 の要素が反対のリストに追加した後、ホバー状態を失うことがないように動作することです。マウスをそれらの上に（そして外に）移動して、本来のように見せる必要があります。したがって、たとえば、最初のコンテナから青色の要素をクリックすると、2 番目のコンテナに移動し、まだ青色のままです (2 番目のコンテナの青色はホバー状態専用です。マウスが要素の上にないため、デフォルトでは緑色になるはずです。要素は別の場所に移動しました)。次に、2 番目のコンテナー内の要素の上にマウスを移動して、要素を通常の状態 (緑色) に戻す必要があります。

HTML:

<div style="height: 210px; width: 600px;">
    <div class="MultiListAvailableElements">
        <ul id="OptionsUL">
            <li id="id1" onclick="MLAdd(this)">1</li>
            <li id="id2" onclick="MLAdd(this)">2</li>
            <li id="id3" onclick="MLAdd(this)">3</li>
            <li id="id4" onclick="MLAdd(this)">4</li>
            <li id="id5" onclick="MLAdd(this)">5</li>
        </ul>
    </div>
    <div class="MultiListSelectedElements">
        <ul  id="SelectedUL">
        </ul>
    </div>
</div>

CSS:

/* ------------------------------------ Available Elements --- */
.MultiListAvailableElements {
    overflow-y: scroll;
    width: 250px;
    height: 200px;
    border: 1px solid black;
}
.MultiListAvailableElements ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
.MultiListAvailableElements ul li {
    background-color: #e5ecff;
    border: 1px solid #c3caff;
    width: 180px;
    text-align: center;
    margin-bottom: 2px;
    padding: 2px;
    cursor: pointer;
    cursor: hand;
    font-family: arial;
    font-size: small;
}
.MultiListAvailableElements ul li:hover {
    background-color: #e5ffec;
    border: 1px solid #a3ffaa;
}

/* ------------------------------------ Selected Elements --- */
.MultiListSelectedElements  {
    overflow-y: scroll;
    width: 250px;
    height: 200px;
    border: 1px solid black;
}
.MultiListSelectedElements ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
.MultiListSelectedElements ul li {
    background-color: #e5ffec;
    border: 1px solid #a3ffaa;
    width: 180px;
    text-align: center;
    margin-bottom: 2px;
    padding: 2px;
    cursor: pointer;
    cursor: hand;
    font-family: arial;
    font-size: small;
}
.MultiListSelectedElements ul li:hover  {
    background-color: #e5ecff;
    border: 1px solid #c3caff;
}

JavaScript:

function MLAdd(Obj) {
    document.getElementById("SelectedUL").appendChild(document.getElementById(Obj.id));
    document.getElementById(Obj.id).onclick = function () { MLDel(Obj); }
}
function MLDel(Obj) {
    document.getElementById("OptionsUL").appendChild(document.getElementById(Obj.id));
    document.getElementById(Obj.id).onclick = function () { MLAdd(Obj);
}
4

1 に答える 1

0

実際にクローンを作成する必要はありません。削除して別の場所に追加するだけです。また、すでに関数への引数として要素を渡しているため、DOMから要素を要求する必要はありません（this元の関数呼び出しのから来ています）。

function MLAdd(Obj) {
    Obj.parentNode.removeChild(Obj);
    document.getElementById("SelectedUL").appendChild(Obj);
    Obj.onclick = function () { MLDel(Obj); }
}

また、document.getElementById（ "SelectedUL"）の結果も、クロージャー内から変数に設定してキャッシュしますが、理解できるように残しておきます。

于 2012-09-19T12:05:22.723 に答える