0

下のようなボタンがあります。ボタンのリストがあります。ユーザーがクリックすると、javascript関数を実行し、ajaxリクエストを作成します。リクエストの応答が成功した場合は、ボタンタグのステータス属性を変更します。1から2に変更します。

属性status=1の場合、ボタンにカーソルを合わせたときにユーザーにテキストを表示させたい。

属性status=2の場合、ボタンホバーで何も表示されないようにします。

以下のように試しましたが、status = 2の後でも、ホバーするとボタンのテキストが変わります。どうすればこれを修正できますか？

<button onclick="dosomething()" id="someid" status="1">name</button>

<script>
function dosomething(){
    $.ajax({
        type:"GET",
        url:"somefile.php",
        success : function(data) {
            if (data == '200') {
                $('#someid').attr('status', '2');
            }
        },
        error : function() {
            alert('error');
        },
    })
}

$(document).ready(function() {
    updateHoverStates()
});

$(document).change(function () {
    updateHoverStates()
});

function updateHoverStates() {
    $('button[status=1]').hover(
        function () {
            $(this).text('You are hovering');
        },
        function () {
            $(this).text('You are not hovering');
        }
    );
}
</script>
4

4 に答える 4

3

これは機能する可能性があります。イベントは、バインド時に 1 回だけではなく、呼び出されるたびにステータス属性をチェックします。

function updateHoverStates() {
    $('button[status]').hover(
        function () {
            if($(this).attr('status') == '1')
                $(this).text('You are hovering');
        },
        function () {
            if($(this).attr('status') == '1')
                $(this).text('You are not hovering');
        }
    );
}

補足として、data-statusカスタム属性を持つより適切にサポートされている方法だと思います。これにより、 の.data('status')代わりに を使用することもでき.attr('status')ます。

または、CSSを使用してそれをシミュレートできる場合があります

button[status="1"]:hover {
    //possible attributes here
}
于 2012-04-30T20:09:58.937 に答える
1

jsFiddle: http://jsfiddle.net/ajzsv/20/

<button onclick="dosomething()" id="someid" status="1">name</button>

<script>
function dosomething()
{
    $('#someid').attr('status', '2');
    $('#someid').unbind('hover');
}

$(document).ready( function()
{
    $('button').each( function()
    {
        $(this).hover(
        function ()
        {
            $(this).text('You are hovering');
        },
        function ()
        {
            $(this).text('You are not hovering');
        });
    });
});
</script>​
于 2012-04-30T20:15:34.360 に答える
0

changeイベントはドキュメントにバブルアップしないため、updateHoverStatesおそらく 2 回目に呼び出されることはありません。

于 2012-04-30T20:04:19.330 に答える
0

セレクターに一致するすべてのボタンのホバー機能を一度設定しましたbutton[status=1]。後で属性を変更しましたstatusが、ホバー イベント リスナーがこれらのボタンから切り離されません。

設定した関数で

$('#someid').attr('status', '2');

イベントリスナーを手動で削除するだけです。

$('#someid').unbind('hover');
于 2012-04-30T20:06:47.593 に答える