1

我正在努力使一个简单的函数在 IE9 中工作。它在 Chrome 和 FF 中完美运行。目的是有 2 个“ul”列表并在点击时在它们之间移动“li”元素。我想在第一个容器（MultiListAvailableElements）中有蓝色背景的 li 元素，在鼠标悬停时变为绿色。在第二个容器（MultiListSelectedElements）中相反 - 绿色背景，鼠标悬停时变为蓝色。

问题是，在 IE9 元素中，在我将它们附加到相反列表之后，它们的行为就像它们永远不会松开悬停状态一样。我必须将鼠标移到它们上方（并移出）以使它们看起来像它们应该的那样。因此，例如，我从第一个容器中单击蓝色元素，它移动到第二个容器并且仍然是蓝色（第二个容器中的蓝色仅用于悬停状态，默认情况下它应该是绿色的，因为鼠标不再位于元素上方，因为该元素已移动到不同的位置）。然后我必须将鼠标移出第二个容器中的元素以使它们恢复正常（绿色）。

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 回答