javascript - jquery 支持多个项目？

Question

我不确定我做错了什么，但在过去的 2 个小时里，我一直在尝试使用 prop 来更改按钮中两个项目的值。它适用于一个但不适用于另一个，我不知道为什么。

html:

<input type='button' value='Following' id='btnFollow' dataaction="UnFollow" datatype='topic'>

j查询:

    $("#btnFollow").prop("value", "Follow");
    $("#btnFollow").prop("dataaction", "Follow");

第一项更改(值)但第二项不变(dataaction)。我不知道为什么(否则可能为时已晚，我的大脑正在反抗)。根据documentation我做对了。我在每个命令之间添加了警报，以防其中一个失败，但是两个警报都消失了，这意味着 jquery 在尝试更改第二项时没有崩溃或发生任何事情。我没有看到任何拼写错误，我尝试菊花链命令，但仍然没有成功。

有什么建议吗？

完整代码:

$(document).ready(function () {
    $('#btnFollow').click(function() {
        var topic_id = $(this).attr('datatopic');
        var action_type = $(this).attr('datatype');
        var action_type_action = $(this).attr('dataaction');
        alert(action_type_action);
        //$("#btnFollow").prop('value', 'Following');
        if (action_type_action == 'Follow') {
            $("#btnFollow").prop({'value': 'Following', 'dataaction': 'UnFollow'});
            //$("#btnFollow").prop("value", "Following");
            //$("#btnFollow").prop("dataaction", "UnFollow");
                 $.ajax({
                type: 'POST',
                url: '/follow_modification',
                async: false,
                data: {
                    topic: topic_id,
                    action: action_type_action,
                    follow_type: action_type
                }
                //complete: function(xmlRequestObject, successString){
                //    ymmReceiveAjaxResponse(xmlRequestObject, successString);
                //}
            });

        } else if (action_type_action == 'UnFollow') {
            $("#btnFollow").prop({'value': 'Follow', 'dataaction': 'Follow'});
            //$("#btnFollow").prop("value", "Follow");
            //$("#btnFollow").prop("dataaction", "Follow");
            $.ajax({
                type: 'POST',
                url: '/follow_modification',
                async: false,
                data: {
                    topic: topic_id,
                    action: action_type_action,
                    follow_type: action_type
                }
                //complete: function(xmlRequestObject, successString){
                //    ymmReceiveAjaxResponse(xmlRequestObject, successString);
                //}
            });
        }
    })

});

Answer 1

您的代码工作正常:http://jsfiddle.net/zerkms/Capvk/

Properties generally affect the dynamic state of a DOM element without changing the serialized HTML attribute

http://api.jquery.com/prop/

所以这就是为什么您看不到它在 html 中发生了变化，而是在 DOM 中发生了变化。如果您也希望在 HTML 中对其进行更改 - 使用 .attr()

PS:正如@a​​hren 在评论中提到的那样 - 使用 .data() 和 data-xxx 属性可能是有意义的

PPS:如果您使用 .prop() 设置值 - 您需要分别使用 .prop() 获取它