jquery prop 多个项目？答案

【问题标题】：jquery prop multiple items?jquery prop 多个项目？
【发布时间】：2012-07-22 09:10:46
【问题描述】：

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

html:

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

jquery:

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

第一项更改（value），但第二项更改（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);
                //}
            });
        }
    })

});

【问题讨论】：

@AnkitGautam 我想用较新的 jquery 你想用 prop 来改变值？
您的代码运行良好jsfiddle.net/zerkms/Capvk
你试过$('#btnFollow').prop({'value': 'Follow', 'dataaction': 'Follow'});吗？
附带说明，数据属性是连字符的。 data-action
@zerkms 使用 chrome 的检查元素功能，我没有看到我网站上的数据操作以及您发布的 jsfiddle 发生变化。

标签： javascript jquery

【解决方案1】：

您的代码运行良好：http://jsfiddle.net/zerkms/Capvk/

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

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

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

PS：正如 @ahren 在 cmets 中提到的 - 使用 .data() 和 data-xxx 属性可能是有意义的

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

【讨论】：

非常感谢它的工作！我曾经使用 attr，但我记得读过，如果你使用 jquery 1.6+，你应该使用 prop..这是真的还是使用 attr 安全？我的逻辑是，如果我要学习一些东西，我不妨学习鼓励使用的东西。 p.s.我把名字改回来了..谢谢！
这是让我认为我不应该使用 attr 的答案：stackoverflow.com/questions/5580616/jquery-change-button-text

【解决方案2】：

请使用.attrjQuery方法。

请正确使用 html5 数据属性 asenter code here 数据操作，您有新的 jQuery 方法来访问此数据属性 $('#btnFollow').data('action') 更多详细信息visit

【讨论】：

关于 .data()，请注意 OP 正在尝试设置元素的属性，而 .data() 没有这样做（即使它可以检索 data-xyz属性值）。

【解决方案3】：

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

改为

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

使用

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

【讨论】：