javascript JQuery选择器-如何比较两个元素ID

hgc7kmma  于 2022-12-25  发布在  Java
关注(0)|答案(3)|浏览(162)

我有多个输入元素,它们在外观和感觉上非常相似。唯一的区别是每个输入都有不同类型的输入代码(旅馆供应商代码或汽车供应商代码)。无需复制自动完成JavaScript代码,我希望对每个输入元素重用相同的代码,但我需要一种方法来标识当前焦点是哪个输入,以便返回值是正确的代码。下面是一个基本概念,我应该如何构造if条件来知道我当前在focus中的输入是"vendor-car"还是"vendor-hotel"?

    • 超文本标记语言:**
<label>Hotel Vendor Codes</label>
<input type="text" class="form-control vendor-autocomplete vendor-hotel" id="Vendor_hotel" />

<label>Car Vendor Codes</label>
<input type="text" class="form-control vendor-autocomplete vendor-car" id="Vendor_car" />
    • 类型脚本:**
var vendorAutocompletes = $('.vendor-autocomplete');
var vendorCar = $('.vendor-car');

if (vendorAutocompletes.length > 0) {
    vendorAutocompletes
        .autocomplete({
            source: function (request, response) {

                if ($(this).attr("id") == vendorCar.attr("id")) {
                    console.log('This input is Car Vendors');
                    getVendors(request.term, VendorTypes.Car, response);
                } else {
                    console.log('This input is Hotel Vendors');
                    getVendors(request.term, VendorTypes.Hotel, response);
                }
            }

        });
}

正在尝试确定与当前输入DOM元素关联的事件的类型是"vendor-car"还是"vendor-hotel"。未定义$(this).attr("id"),而不是当前元素。

if ($(this).attr("id") == vendorCar.attr("id")) {
kb5ga3dv

kb5ga3dv1#

我已经有一段时间没有使用jQuery了,但我会使用它:

const vendors = $('.vendor-autocomplete')

for (const vendor of vendors) {
  switch (vendor.attr('data-vendor')) {
  case 'hotel':
    //do stuff
    break
  case 'car':
    // do some other stuff
    break
  default:
    // just in case
    break
  }
}
<label>Hotel Vendor Codes</label>
<input type="text" class="form-control vendor-autocomplete" data-vendor="hotel" />

<label>Car Vendor Codes</label>
<input type="text" class="form-control vendor-autocomplete" data-vendor="car" />

如果这是您唯一的用例,我认为您不需要id属性,只需对所有输入使用相同的类,并将供应商类型存储在定制的data属性中。

1szpjjfi

1szpjjfi2#

看起来像这样工作:参考:api.jquery.com/focus-selector

if (vendorCar.is(":focus"))
    console.log("Input is Car Vendors");
whitzsjs

whitzsjs3#

问题是$(this)未定义。
但是使用.each()循环可以提供所需的element

var vendorAutocompletes = $('.vendor-autocomplete');
var vendorCar = $('.vendor-car');

if (vendorAutocompletes.length > 0) {
    vendorAutocompletes.each(function(index, element) {
        $(element).autocomplete({
            source: function (request, response) {

                if ($(element).attr("id") == vendorCar.attr("id")) {
                    console.log('This input is Car Vendors');
                    return getVendors(request.term, VendorTypes.Car, response);
                } else {
                    console.log('This input is Hotel Vendors');
                    return getVendors(request.term, VendorTypes.Hotel, response);
                }
            }

        });
    })
}

我添加了可能丢失的return ...

相关问题