Question

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

HTML：

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

jquery的：

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

第一项更改（value）但不更改第二项（dataaction）。我不知道为什么（其他可能为时已晚，我的大脑正在反抗）。根据{{3}}我正在做的正确。我在每个命令之间添加了警报，以防一个失败，但两个警报都关闭，这意味着当jquery尝试更改第二个项目时没有崩溃或任何事情。我没有看到任何拼写错误，我试图菊花链接命令，但仍然没有运气。

有什么建议吗？

entire_code：

$(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/

属性通常会影响DOM元素的动态状态，而不会更改序列化的HTML属性

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

这就是为什么你没有看到它在html中被改变的原因，但它在DOM中被改变了。如果您希望在HTML中更改它 - 请使用.attr()

PS：正如@ahren在评论中提到的那样 - 使用.data()和data-xxx属性

可能是有意义的

PPS：如果您使用.prop()设置值，则需要分别使用.prop()

Answer 2

如果需要使用单个jQuery .prop方法设置多个属性，只需尝试：

代替

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

使用

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

Answer 3

请使用.attr jQuery方法。

请使用正确的html5数据属性作为enter code here数据操作，您有新的jQuery方法可以使用$('#btnFollow').data('action')访问此数据属性。有关详细信息visit

jquery prop多项？

3 个答案: