gpt4 book ai didi

javascript - jquery/javascript 隐藏除单击的项目之外的所有子表单元素

转载 作者:行者123 更新时间:2023-12-03 03:07:10 27 4
gpt4 key购买 nike

我有相当多的 html 代码是从我正在使用的 json 模式库生成的。

我在这里创建了一个 jsfiddle:

更新了jsfiddle:https://jsfiddle.net/DTcHh/39070/

基本上每个表单组都是由 html5 属性定义的:

div data-schemaid

从jsfiddle中可以看到,所有表单div元素都嵌套在:

<div data-schemaid="/properties/TLRoot">
</div>

现在,当有人单击菜单栏上的某个项目时,它应该隐藏除单击的项目之外的所有表单组项目。

我尝试了以下代码,但似乎不起作用。

   $(document).on("click","#card-range",function(e) {
e.preventDefault();
//history.pushState({}, "", this.href);
$('[data-schemaid="/properties/TLRoot/"]').not($('[data-schemaid="/properties/TLRoot/properties/CardRangeList"]')).hide();
});

$(document).on("click","#hosts",function(e) {
e.preventDefault();
$('div[data-schemaid="/properties/TLRoot/"]').not($('div[data-schemaid="/properties/TLRoot/properties/HostList"]')).hide();
});

另外,一旦我完成了这个工作,拥有一个通用函数就会很酷,而不是为每个菜单栏项重复此代码

最佳答案

您的 HTML 相当长,内容相对较少。此外,某些菜单项具有折叠/展开行为,因此单击它们将产生两种效果(折叠/展开以及子表单的隐藏/显示)。

无论如何,以下是让它发挥作用的方法:

// map the menu item with the section that needs to be shown
var dataForId = {
"card-range": 'div[data-schemaid="/properties/TLRoot/properties/CardRangeList"]',
"hosts": 'div[data-schemaid="/properties/TLRoot/properties/HostList"]'
// extend as needed ...
};
// Extract the keys from the above object, and turn that into a selector
var selector = $.map(dataForId, function (value, key) {
return '#' + key;
}).join(',');

$(document).on("click",selector,function(e) {
e.preventDefault();
// Hide all relevant sections. Due to the unnecessary nesting and lack of
// useful things to select by, this is quite delicate code --
// meaning a slight change in the HTML could break this selector:
$('div[data-schemaid="/properties/TLRoot"]>.well>div>div>.row>[data-schemaid]').hide();
// Show only the one we need to have
$(dataForId[this.id]).show();
});

请参阅updated fiddle

关于javascript - jquery/javascript 隐藏除单击的项目之外的所有子表单元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47115840/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com