jquery支持多个项目

jquery prop multiple items?

本文关键字:项目 支持 jquery      更新时间:2024-01-13

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

html:

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

jquery:

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

第一个项目发生变化(value),但第二个项目(dataaction)没有变化。我不知道为什么(也许已经太晚了,我的大脑正在反抗)。根据文件,我做得很正确。我在每个命令之间添加了警报,以防其中一个失败,但两个警报都熄灭了,这意味着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);
                //}
            });
        }
    })
});

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

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

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

所以这就是为什么在html中看不到它发生了变化,而是在DOM中发生了变化。如果你想在HTML中更改它,也可以使用.attr()

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

PPS:如果使用.prop()设置值,则需要使用.prop()分别获取

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

而是

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

使用

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

请使用.attrjQuery方法。

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