Question

我有一个如下按钮。我有一个按钮列表。当用户点击它时，我运行一个javascript函数并发出ajax请求，如果请求响应成功，则我更改按钮标记的状态属性。我将它从1改为2.

当属性status = 1时，我希望用户在鼠标悬停时看到一些文字。

当属性状态= 2时，我不希望他在按钮悬停时看到任何内容。

我尝试过以下但是在状态= 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>

Answer 1

这可能有效，这样事件就是每次调用时检查staus attr，而不是在绑定时检查一次。

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
}

Answer 2

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>

Answer 3

change个事件不会冒泡到文档中，因此updateHoverStates可能不是第二次调用。

Answer 4

您曾为匹配选择器button[status=1]的所有按钮设置悬停功能。您稍后更改了status属性，但这并未将悬停事件侦听器与这些按钮分离。

在您设置的功能

中

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

您只需手动删除事件侦听器。

$('#someid').unbind('hover');

Jquery在悬停html文本更改

4 个答案: