jQuery两个不同的选择器，但根据哪一个定义$(this）

jQuery two different selectors but defining $(this) depending on which one

本文关键字：哪一个 定义 this 两个 jQuery 选择器      更新时间：2023-09-26

我有我刚刚写的这段代码，最初我是作为两个单独的代码做的，但想清理并在一种方法中：

$('#onestepcheckout .ty-billing-first-name input,#onestepcheckout .ty-billing-last-name input').blur(function() {
    var firstname = $(this).val();
    var lastname = $(this).val();
    $.ceAjax('request', fn_url('ac.email'), {
        method: 'post',
        data: {
            'firstname': firstname,
            'lastname': lastname
        },
        caching: true
    });
});

我对JS/jQuery相当陌生。如您所见，我为名字和姓氏设置了两次，这当然我知道是行不通的。无论如何，为了我需要的东西而获得这个，或者更确切地说是在上面的一行中要求？

我的想法是对的吗？

var firstname_sel = '#onestepcheckout .ty-billing-first-name input';
var lastname_sel = '#onestepcheckout .ty-billing-last-name input';
$(firstname_sel,lastname_sel).blur(function() {
    var firstname = $(firstname_sel).val();
    var lastname = $(lastname_sel).val();
    $.ceAjax('request', fn_url('ac.email'), {
        method: 'post',
        data: {
            'firstname': firstname,
            'lastname': lastname
        },
        caching: true
    });
});

我还没有测试过，但想先检查一下它是否正确。

是的，那会起作用。您可以更改一些内容以使其更高效或更友好。

首先，确保要在blur上执行该 ajax 调用(请记住，每次用户退出两个输入时都会调用它(。另一种方法是将您的输入包装在<form>中，并绑定到该表单的 submit 事件，该事件将在用户单击<button type="submit" />时提交。

其次，您可能需要一些验证，因为当用户退出另一个输入时，一个字段可能为空：firstname = firstname === '' ? 'Default' : firstname;或类似的东西。

最后，有很多方法可以处理您的绑定/选择问题。您可以改为执行以下操作：

<input id="first-name" class="name-input" ... />
<input id="last-name" class="name-input" ... />
$('.name-input').bind('blur', function() {
  var fName = $('#first-name').val();
  var lName = $('#last-name').val();
  ... validation code from above then ajax call ...
});

但是有些人可能不会容忍将功能与类相关联，因为新开发人员查看代码或意外复制和/或误认为样式类很容易错过这一点。

您几乎可以肯定上面唯一可以更改的是，通过在输入本身添加 id 而不是基于父元素进行选择来使您的选择器更简单。

好的设法解决了，这是解决方案

var firstname_sel = '#onestepcheckout .ty-billing-first-name input';
var lastname_sel = '#onestepcheckout .ty-billing-last-name input';
$(firstname_sel+','+lastname_sel).blur(function() {
    var firstname = $(firstname_sel).val();
    var lastname = $(lastname_sel).val();
    $.ceAjax('request', fn_url('ac.email'), {
        method: 'post',
        data: {
            'firstname': firstname,
            'lastname': lastname
        },
        caching: true
    });
});
相关文章：