Question

页面加载时，我将某些数据属性设置为不等于空。用户从列表项中选择一个项后，它将填充数据属性。我想执行一个简单的验证，说如果这些属性之一为空，则警告错误，否则继续进行。

如果我在字段中什么都没按下按钮，我会得到很好的错误。但是，如果我选择了某些内容，则可以在控制台中看到该按钮现在在数据属性中具有值，但仍然会收到验证错误。如果我做相反的事情，也是如此。如果我选择一个项目，那么它将通过验证。如果我清除该字段，则验证失败，但仍然失败。似乎第二次仍在使用第一次点击中的数据。

$('body').on('click', '#checkout', function(e) {
    e.preventDefault();

    var user_email = $(this).data('newemail');
    var uid = $(this).data('newid');
    var first_name = $(this).data('namename');

    if(uid !== '') {


        //make ajax call


    } else {

        alert('No values');
    }

});

单击列表项时，我将像这样设置数据属性：

$( '#checkoutAsCustomer' ).attr('data-newid', uid);
$( '#checkoutAsCustomer' ).attr('data-newemail', user_email);
$( '#checkoutAsCustomer' ).attr('data-newname', first_name);

Answer 1

获取和设置时不要混合属性和数据属性。您应该使用jQuery .data()方法进行读写，否则结果会不一致。

例如...

var $div1 = $("#div1");
var $div2 = $("#div2");

console.log("before...");
console.log($div1.data("myattr"));
console.log($div2.data("myattr"));

$div1.attr("data-myattr", "Goodbye");
$div2.data("myattr", "Goodbye");

console.log("after...");
console.log($div1.data("myattr"));
console.log($div2.data("myattr"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div1" data-myattr="Hello"></div>
<div id="div2" data-myattr="Hello"></div>

因此，您的代码应像这样设置数据属性...

$('#checkoutAsCustomer').data('newid', uid);
$('#checkoutAsCustomer').data('newemail', user_email);
$('#checkoutAsCustomer').data('newname', first_name);

Answer 2

要设置和读取.data-属性，您需要使用.data()方法而不是.attr()。您还删除了data-前缀：

$('#checkoutAsCustomer').data('newid', uid);
$('#checkoutAsCustomer').data('newemail', user_email);
$('#checkoutAsCustomer').data('newname', first_name);

jquery将数据值保存在本地存储中，而不是针对元素上的data-attr属性。

当您第一次使用.data(newid)读取值时，它确实会使用data-newid=属性（如果有），但是此后它将使用内部存储。

第二次单击按钮时，数据属性不会更新

2 个答案: