1

動的 ID を使用して、JSP ページに 2 つの要素を動的にレンダリングしています。各要素のマウスオーバーで をレンダリングしdiv、マウスアウトで同じdisplay値を作成していますnone。問題は、 にカーソルを合わせると、divがdiv点滅し続けることです。どうすればこれを解決できますか?

コード例:

<table>
    <tr>
        <td>
            <div onmouseover="showblock(hoverdivid)" onmouseout="hideblock(hoverdivid)">india</div>
            <div class="hoverdiv" id="dynamicallygenerated">
                <li>a list of checkboxes with state names of the country hovered will be inserted using ajax</li>
            </div>
        </td>
        <td>
            <div onmouseover="" onmouseout="">america</div>
            <div class="hoverdiv" id="dynamicallygenerated">
                <li>a list of checkboxes with state names of the country hovered will be inserted using ajax</li>
            </div>
        </td>
    </tr>
</table>

<script>
var showblock;
var hideblock;
$(document).ready(function (e) {

    showblock = function (id) {

        $("#" + id).show();

    }
    hideblock = function (id) {

        $("#" + id).hide();

    }

});
</script>

私の質問を拡張する

ajaxを使用してホバーにチェックボックスを挿入していると述べましたが、同じホバーに、ホバーでチェックした値をテーブル外の他のdivに追加する追加ボタンがあります。私は2つの国を持っているので、それらの引用に2つのホバーがあるので、チェックしてクリックすると、表示される2つのホバーの値が追加され、チェックされているものが個別に表示され、上記の要件を解決するために従うべきアプローチが提案されます

4

2 に答える 2

0

ワーキングデモhttp://jsfiddle.net/cse_tushar/FKacT/1

HTML

<table border="1">
    <tr>
        <td>
            <div class="div">india</div>
            <div class="hoverdiv" id="dynamicallygenerated">
                <li>a list of checkboxes with state names of the country hovered will be inserted using ajax</li>
            </div>
        </td>
        <td>
            <div class="div">america</div>
            <div class="hoverdiv" id="dynamicallygenerated">
                <li>a list of checkboxes with state names of the country hovered will be inserted using ajax</li>
            </div>
        </td>
    </tr>
</table>

CSS

td{
    vertical-align: top;
}

js

$(document).ready(function () {
    $('.div').hover(function () {
        x = $(this).css('width');
        $(this).parent().find('.hoverdiv').show();
        $(this).css('width', $(this).parent('td').width());
    }, function () {
        $(this).css('width', x);
        $(this).parent().find('.hoverdiv').hide();
    });
});
于 2013-07-26T16:39:06.770 に答える