代码制作的元素在加载时不显示?

时间:2018-08-16 10:18:13

标签: javascript html

我的任务是为我们公司提供的查询API演示。为此,我的老板希望我创建一个包含搜索功能的简单HTML网站,以使用上述API。到目前为止,我已经设法创建了她想要的几乎所有东西,但是现在却陷入了一个相当……奇怪的问题。

我设法创建了一个灵活的过滤功能,允许用户添加/删除他们认为合适的过滤器。我已经做到了:

window.onload = function init()
{
	var filterSet = document.getElementsByTagName("fieldset")[0];
	var filterSection = filterSet.getElementsByTagName("section");
	var set = filterSection[1];
	var elements = set.getElementsByTagName("*");
	set.getElementsByTagName("*")[5].addEventListener("click", cloneSection);

	if (filterSection.length > 2) 
	{
		elements[6].hidden = false;
		elements[6].addEventListener("click", deleteSection);
	}
	else
	{
		elements[6].hidden = true;
	}

}

function cloneSection(e)
{
	var filterSet = document.getElementsByTagName("fieldset")[0];
	var filterSection = filterSet.getElementsByTagName("section");
	var newId = parseInt(filterSection[filterSection.length - 1].id) + 1;
	var set = filterSection[1];
	var newSet = set.cloneNode(true);
	var elements = newSet.getElementsByTagName("*");
	newSet.id = "" + newId;
	elements[5].addEventListener("click", cloneSection);
	elements[6].hidden = false;
	elements[6].addEventListener("click", deleteSection);
	filterSet.appendChild(newSet);
}

function deleteSection(e)
{
	var target = e.target;
	var filterSet = document.getElementsByTagName("fieldset")[1];
	var filterSection = target.parentElement;
	filterSection.remove();
}
<fieldset>
			<section>
			<input type="checkbox" id="filter_query" name="feature" value="search" />
			</section>
			<section id="0">
				<input type="text" name="filter_name">
				<select id="comperason_type">
					  <option value="=">Equal to</option>
					  <option value="!=">Different then</option>
				</select>
				<input type="text" name="filter_value">
				<input type="submit" value="+" id="AddButton">
				<input type="submit" value="-" id="RemoveButton" hidden="true">
			</section>
		</fieldset>

这是相当基本的(我承认,我是网络和整个Java的新手),但是在大多数情况下,它都很好用。除了一个问题。

我希望在用户添加新过滤器时允许他们删除由原始标记创建的默认过滤器。该按钮在那里,我只需要将其设置为hidden = false就可以了。除了...当我尝试这样做时,由于某种原因,代码无法识别其中创建的多余部分。例如,如果字段集中有3个部分,其中一个是由我自己的代码创建的,则长度计数将仅返回 2。

有人知道为什么吗?或者我该怎么做才能使其正确计数?很抱歉,这是一个新问题,但是就像我说的那样,我在这里有点儿不了解了。

编辑:制作了这次有效的代码段。很抱歉使它令人困惑,但现在应该很好。

0 个答案:

没有答案