0

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

当属性状态 = 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

这可能有效，这样事件在每次调用时都会检查状态属性，而不是在绑定时只检查一次。

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这是一种更好地支持自定义属性的方式，这也将允许使用 of.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可能不会被第二次调用。

于 2012-04-30T20:04:19.330 回答
0

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

在您设置的功能中

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

您应该手动删除事件侦听器。

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