jQuery动态更改css/文本

我做错了什么？ 我希望动态更改div的文本，并将css类添加/删除到此div。” 存在两个同名但ID不同的div

 <div class="mydiv" id="1">Text</div>
 <div class="mydiv" id="2">Text</div> 
 <div class="mydiv" id="3">Text</div> 

 <input type="hidden" name="myfield" id="myfield" value="myvalue" /> 

$(document).ready(function () {
    $.each($('.mydiv'), function () {
        var code = $(".mydiv").attr("id");

        $.ajax({
            url: '/mycontroller',
            type: 'POST',
            dataType: 'json',
            data: {
                id: $("#myfield").attr("value"),
                codeId: this.id
            },
            success: function (data) {
                if (data == false) {
                    $("#" + this.id).addClass("myNewClass");
                    $("#" + this.id).text("FirstText");
                } else {
                    $("#" + this.id).removeClass("myNewClass");
                    $("#" + this.id).text("SecondText");
                }
            }
        });
    });
});

试一试

$(document).ready(function () {
    $.each($('.mydiv'), function () {
        var code = $(".mydiv").attr("id");

        $.ajax({
            url: '/mycontroller',
            type: 'POST',
            dataType: 'json',
            data: {
                id: $("#myfield").attr("value"),
                codeId: this.id
            },
            success: function (data) {
                if (data == false) {
                    $("#" + this.id).addClass("myNewClass");
                    $("#" + this.id).text("FirstText");
                } else {
                    $("#" + this.id).removeClass("myNewClass");
                    $("#" + this.id).text("SecondText");
                }
            }
        });
    });
});

看起来有多个问题，从循环、ajax成功回调的执行上下文等开始

$(document).ready(function () {
    $.each($('.mydiv'), function () {
        var code = $(".mydiv").attr("id");

        $.ajax({
            url: '/mycontroller',
            type: 'POST',
            dataType: 'json',
            data: {
                id: $("#myfield").attr("value"),
                codeId: this.id
            },
            success: function (data) {
                if (data == false) {
                    $("#" + this.id).addClass("myNewClass");
                    $("#" + this.id).text("FirstText");
                } else {
                    $("#" + this.id).removeClass("myNewClass");
                    $("#" + this.id).text("SecondText");
                }
            }
        });
    });
});

$(document).ready(function () {
    $('.mydiv').each(function () {
        //use this.id to get the current elements id - $(".mydiv").attr("id") will give the id of first element with class mydiv
        var code = this.id;

        $.ajax({
            url: '/mycontroller',
            type: 'POST',
            dataType: 'json',
            data: {
                id: $("#myfield").attr("value"),
                codeId: this.id
            },
            success: $.proxy(function (data) {
                //inside the callback this was not pointing the element, here a proxy based soution is used
                //another solution is to assign var self = this; before the ajax request and then instead of this inside the function use self
                if (data == false) {
                    $(this).addClass("myNewClass");
                    $(this).text("FirstText");
                } else {
                    $(this).removeClass("myNewClass");
                    $(this).text("SecondText");
                }
            }, this)
        });
    });
});

尝试

.html（）

而不是

.text（）

$(document).ready(function () {
    $.each($('.mydiv'), function () {
        var code = $(".mydiv").attr("id");

        $.ajax({
            url: '/mycontroller',
            type: 'POST',
            dataType: 'json',
            data: {
                id: $("#myfield").attr("value"),
                codeId: this.id
            },
            success: function (data) {
                if (data == false) {
                    $("#" + this.id).addClass("myNewClass");
                    $("#" + this.id).text("FirstText");
                } else {
                    $("#" + this.id).removeClass("myNewClass");
                    $("#" + this.id).text("SecondText");
                }
            }
        });
    });
});