0

.myClass をクリックすると、#message の前に「a」が表示されます。残念ながら、代わりに「aaaa a」が表示されます。

私のCSSは次のとおりです。

    #message{
    width: 80%;
    height: 10%;
    border-style:solid;
    border-width:5px;
}


 .hideIt{
    visibility:hidden;
}

私のコードは次のとおりです。

<div id="message">test1 <span class="myClass hideIt">test2</span></div>

    <script src="jquery.js"></script>
    <script>
    $(function() {

        test = function() { $('#message').before('a '); }

        $(document).on('mouseover', '#message', function () {
            var el = $(this);
            el2 = el.children('.myClass');
            el2.removeClass('hideIt');
            el2.on('click',test);
            el.on('mouseout', function() {
                el2.addClass('hideIt');
            });
        });

    });
    </script>

ここにフィドルのリンクがあります: http://jsfiddle.net/TDJVw/

4

3 に答える 3

2

ここでこのフィドルをチェックしてくださいhttp://jsfiddle.net/TDJVw/1/それはあなたが望むことをします。

あなたの問題は、ホバリングさclickれるたびにメソッドを登録していたことです。メソッドの外側divを移動しました。clickhover

于 2013-04-09T07:50:48.957 に答える
1

私はあなたのフィドルを更新しました：

http://jsfiddle.net/TDJVw/8/

$(document).on('mouseover', '#message', function () {
    $(this).find('.myClass').removeClass('hideIt');
}).on('mouseout', '#message', function() {
    $(this).find('.myClass').addClass('hideIt');
})

$('#message .myClass').on('click', test);

clickおよびmouseoutイベント ハンドラーをハンドラーの外mouseoverに移動しました

編集: おっと、#message を 2 番目の .on() に追加するのを忘れていました

于 2013-04-09T07:54:13.237 に答える
0

試したら

test = function() { $('#message').html('a '); }

これにより、「a」が「test1」の場所に配置されます。これはあなたの要件ですか？

于 2013-04-09T07:50:16.127 に答える