javascript jquery 支持多个项目?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11624282/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 13:50:53  来源:igfitidea点击:

jquery prop multiple items?

javascriptjquery

提问by Lostsoul

I'm not sure what I'm doing wrong but for the past 2 hours I've been trying to use prop to change the value of two items in a button. It works for one but not for the other and I have no idea why.

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

html:

html:

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

jquery:

查询:

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

The first item changes(value) but not the second one(dataaction). I have no idea why(other then maybe its too late and my brain is rebelling). According to the documentationI'm doing it correct. I added alerts inbetween each command in case one was failing, but both alerts went off meaning jquery is not crashing or anything when it tries to change the second item. I don't see any spelling mistakes and I tried to daisy chain the commands but still no luck.

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

Any suggestions?

有什么建议?

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);
                //}
            });
        }
    })

});

回答by zerkms

Your code works just fine: http://jsfiddle.net/zerkms/Capvk/

你的代码工作得很好:http: //jsfiddle.net/zerkms/Capvk/

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

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

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

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

So that's why you don't see it changed in html, but it is changed in DOM instead. If you want it to be changed in HTML as well - use .attr()

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

PS: as @ahren mentioned in the comments - it probably makes sense to use .data()and data-xxxproperties

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

PPS: if you set the value using .prop()- you need to get it with .prop()respectively

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

回答by Vins

Please use .attrjQuery method.

请使用.attrjQuery 方法。

Please use properly html5 data attribute asenter code heredata-action for which you have new jQuery method to access this data attribute with $('#btnFollow').data('action')For more details visit

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