1

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

我无法让它工作。我想我以某种方式误解了 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/

任何指针将不胜感激。

4

3 回答 3

1

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

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

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

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

你用你的分叉小提琴去那里：http: //jsfiddle.net/BE8ZV/

于 2013-03-29T20:56:53.680 回答
0

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

我没有做的是修复错误。现在是如何开始：在 Chrome 中加载该页面并打开开发者工具。然后单击您的一个单选按钮，它将在该debugger;语句上停止。从那里您可以通过将鼠标悬停在变量上来检查变量，单步执行代码，并执行各种有用的操作。在那里闲逛一会儿，您应该会找到错误，或者如果没有，请报告您在调试器中发现的内容，我们可以再解决一些问题。

于 2013-03-29T20:55:14.077 回答
0

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

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

示范

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

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

示范

于 2013-03-29T20:59:21.523 回答