0

提供された JSON データに基づいて動的要素を生成する JavaScript を作成しました。

  $(function () {
        var list = JSON.parse(@ViewBag.NomineeList);
        var counter = 1;
        var tr;
        $(list).each((function () {
            if (counter % 2 != 0) {
                tr = CreateElems('tr', null, null);
            }
            var td = CreateElems('td', null, null);
            var div = CreateElems('div', 'dvBorder', null);
            div.attr('empID', this.EmpId);
            div.attr('nomineeID', this.Id);
            RegisterEvents(div);
            div.append('<img alt="user" src=' + this.UserImagePath + ' style="padding: 5px;" />');
            div.append(CreateElems('span', 'EmpolyeeName', this.FirstName));
            div.append(CreateElems('span', 'EmployeeEmail', this.Email));
            td.append(div);
            tr.append(td);
            if (counter % 2 == 0) {
                $('#tblEmployee').append(tr);
                tr = "";
            }
            counter++;
        }));
    });

    function CreateElems(type,cssClass,value)
    {
        var elem = $(document.createElement(type));

        if(value != null)
            elem.text(value);

        if(cssClass!= null)
            elem.addClass(cssClass);

        return elem;
    }

作成された動的要素に対して登録した 3 つの異なるイベントがあります。

   function RegisterEvents(crntDiv) {
        var url;
        $(crntDiv).click(function () {
            url = "/home/SaveVote?nomineeId=" + $(crntDiv).attr('nomineeID');
            AjaxCall(url, false, crntDiv);
        });

        $(crntDiv).mouseover(function () {
            RemoveToolTip();
            url = "/home/GetDescription?nomineeId=" + $(crntDiv).attr('nomineeID');
            AjaxCall(url, true, crntDiv);
        });

        $(crntDiv).mouseout(function () {
            $(crntDiv).children('div.RollOverTip').remove();
        });

    }

ツール ヒントの上にマウスを移動すると、表示されます。そのイベントで、削除する必要がある以前のツール ヒントが dom に存在するかどうかを確認しています。

  function RemoveToolTip() {
            $('#tblEmployee').find('div.RollOverTip').remove();
        }

それでも、ブラウザに 3 つのツール ヒントが 2 つ以上表示される場合があります。また、これを少し最適化することもできます。

HTML

<table border="0" cellpadding="5" cellspacing="0"  id="tblEmployee">
        </table>

css クラス。

.dvBorder
{
    background-image: url(/Images/screen2-button.png);
    background-repeat: no-repeat;
    height: 125px;
    width: 400px;
    cursor:pointer;
    position: relative;
}


.RollOverTip
{
    background-image: url("/Images/screen2-rollover-tooltip.png");
    background-repeat: no-repeat;
    color: #000000;
    font-family: Calibri Regular;
    font-size: 18pt;
    height: 199px;
    line-height: 20pt;
    margin-left: 385px;
    position: absolute;
    width: 474px;
    z-index: 90000;
    padding:34px;
}

スクリプトで可能な最適化は何ですか?また、ちらつきを取り除くための提案はありますか?

4

2 に答える 2

1

mouseenterとを使っmouseleaveてちらつきを止めてみてください

    $(crntDiv).mouseenter(function () {
        RemoveToolTip();
        url = "/home/GetDescription?nomineeId=" + $(crntDiv).attr('nomineeID');
        AjaxCall(url, true, crntDiv);
    });

    $(crntDiv).mouseleave(function () {
        $(crntDiv).children('div.RollOverTip').remove();
    });
于 2013-02-27T09:54:07.320 に答える
1

mouseenter使用してみるとmouseleave、マウスオーバーとマウスアウトの代わりに問題が解決する場合があります

編集

これを試してください：変更

 $(crntDiv).mouseover(function () {...}

に

$(document).on('mouseenter',$(crntDiv,'#tblEmployee div.RollOverTip'), function () {...}
于 2013-02-27T09:54:56.483 に答える