Question

我网站上的

是一个包含多个具有相同名称的复选框的表单：

<span class="selection"><input type="checkbox" name="product" value="Hard Enamel" />Hard Enamel</span>
<span class="selection"><input type="checkbox" name="product" value="Soft Enamel" />Soft Enamel</span>
<span class="selection"><input type="checkbox" name="product" value="Metal Relief" />Metal Relief</span>
<span class="selection"><input type="checkbox" name="product" value="Printed With Epoxy" />Printed With Epoxy</span>

在我的Javascript中，我将这些分配给变量并使用JQuery具有onclick函数。有了这个我仍然可以运行JQuery函数没有问题，例如products.css("display","none")有效。

但是当尝试在products中选择一个特定的复选框时，它会返回错误。

这是我的JS：

var products = $("input[name=product]").click(function(){selectProduct()});

products.get(0).css("display","none");

以上操作不起作用，我收到错误badges_calc.js:9TypeError: 'undefined' is not a function (evaluating 'products.get(0).css("display","none")')

我该如何解决这个问题？我比较初学。

干杯

Answer 1

get()返回DOM元素，请尝试使用eq。 DOM元素没有css方法，它是拥有它的jquery Object。 eq(0)将为集合中的第一个元素提供jquery对象。

products.eq(0).css("display","none");

如果您真的希望隐藏跨度以及复选框，请使用：

products.eq(0).closest('span').css("display","none");

否则只要隐藏复选框，它就会留下带有文本的跨度。

Answer 2

试试这个：

var products = $("input[name=product]");
products.click(function(){selectProduct()});
products.eq(0).css("display","none");

使用.get()时，您将获得原始DOM元素，并且无法使用jQuery的方法，因此您无法使用.css()

Answer 3

.get()返回一个原始DOM对象。

你想要.eq(0)，它返回一个只有一个元素的jQuery对象。

Answer 4

使用nearest或parent隐藏所选输入的父级。

var products = $("input[name=product]").click(function(){selectProduct(this)});

var items = [];
function selectProduct(self){
    $(self).closest('span').hide('slow');
    items.push($(self).val());
    console.log(items);
}

JQuery .get（）的问题 -

4 个答案: