Question

我正在处理包含许多部分的表单。每个部分内都有一个单选按钮，用于指示用户想要使用的单位（磅/盎司对公斤等）。当他们点击一个单位时，我想隐藏（）同一部分中的所有输入，然后显示（）相关部分。

我无法让它发挥作用。我想我以某种方式误解了find（）函数，因为它没有选择任何元素。

var show_hide_units = function (selectedUnitElement) {
    $element = $(selectedUnitElement);
    unit_class = $element.attr("class");
    $section = $($element.parents('.measurement'));
    $inputs = $($section.find('.inputs *'));
    $inputs.hide();
    $inputs.find('.' + unit_class).show();
};

这是一个显示更多背景的小提琴：http://jsfiddle.net/32Q9t/

任何指针都会非常感激。

Answer 1

http://api.jquery.com/find/：

.find（选择器）描述：获取每个元素的后代当前的匹配元素集，由选择器jQuery过滤对象或元素。

所以只需使用$('.youClass')来匹配目标元素。

var show_hide_units = function (selectedUnitElement) {
    var targetClass = $(selectedUnitElement).attr('class');
    $('.inputs > *').hide();
    $('.' + targetClass).show();
};

你带着分叉的小提琴：http://jsfiddle.net/BE8ZV/

Answer 2

您知道如何使用JavaScript调试器吗？这是你问题的真正答案。以下是如何开始使用：在您的小提琴中，在debugger;函数的开头插入show_hide_units()语句，就像在此updated fiddle中一样。我还对您的代码进行了一些小的更改，添加了缺少的var声明，并删除了两行中的冗余$()包装器。（来自.parents()或.find()的返回值已经是jQuery对象。）

我没做的是修复错误。现在，这里是如何开始：在Chrome中加载该页面并打开开发人员工具。然后单击其中一个单选按钮，它将停止在debugger;语句上。从那里，您可以通过将变量悬停在它们上，单步执行代码来检查变量，并执行各种有用的操作。在那里徘徊一段时间，你应该找到这个bug，或者如果不是，请用你在调试器中发现的内容报告，我们可以再试一遍。

Answer 3

如果你选择隐藏所有'.inputs *'个元素（根本不是最简单的解决方案），那么你必须显示更多的输入，你所做的，因为隐藏的“可见”元素并不是真的可见：

$inputs.parent().find('.' + unit_class+', .' + unit_class+' *').show();

Demonstration

更简单的解决方案是隐藏/只显示一个级别的元素：

$('.inputs > *').hide();
$('.inputs > .'+unit_class).show();

Demonstration

jQuery：用.find（）按类动态选择元素

3 个答案: