javascript - jQuery 返回元素属性的初始值

Question

情况描述

我的 HTML 表单加载了可变数量的元素，这些元素具有 valid = "default" 属性。

当用户为每个元素输入一个值时，我使用 AJAX 来验证标签并相应地将 valid 设置为 true 或 false。

按下提交按钮后，我收集了 valid 属性值。

问题

jQuery 只返回 valid 的初始值。有没有办法获取 valid 的更新值？

我使用的代码:

var tags = ($('.tag').map(function () { return $(this).attr('valid') })).get();

返回 ["default", "default"] 即使值已经更新并且应该显示 ["true", "false"]

我是 JavaScript、jQuery 和 AJAX 的新手。所以，如果有更好的方法来做到这一点，请告诉我您的想法。

Answer 1

$('#' + field + 'cell')

选择 td 元素，input 的 parent 元素具有 valid 属性，而不是 input 元素本身，导致

.attr("valid", "false")

被应用到父 td 元素，不是 child input 元素。

尝试删除 DOM 事件属性，将选择器更改为

        $('#' + field + 'cell')
        .attr("style", 'border:3px solid #FF0000')
        .find("[id="+field+"]").attr("valid", "false")

---

$(function() {
  function validate(field, query) {
    $.ajax({
        type: "POST",
        url: "/echo/json/",
        data: {json:JSON.stringify(query)}          
    })
    .done(function(response) {
       console.log(field, response === "false", response === "true")

        //response = response.replace(/[[\]]/g,'');
        if(response === 'false') {
            $('#' + field + 'cell')
            .attr("style", 'border:3px solid #FF0000')
            .find("[id="+field+"]").attr("valid", "false")
        }
        else {
            $('#' + field + 'cell')
            .attr("style", 'border: none')
            .find("[id=" + field + "]")
            .attr("valid", "true")

        }
    })
    .fail(function() {
        $('#response').html('error');
    })
    .always(checkForm) // added to verify `checkForm` at each `$.ajax` call
  }

  function checkForm(variable) {
    var tags = $.map($(".tag"), function (el) { return $(el).attr('valid') });

    console.log(tags);
  }

  $("#submitButton").on("click", function(e) {
     checkForm()
  });

  $("[id^=tag]").on("blur", function(e) {
      validate(e.target.id, e.target.value)
  });
});

jsfiddle http://jsfiddle.net/mL8ttwc0/2/