Question

我从我正在使用的json架构库生成了很多html代码。

我在这里创建了一个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();
    });

此外，一旦我有这个工作，有一个通用的功能，而不是为每个菜单栏项重复此代码将是很酷的

Answer 1

对于相对较少的内容，您的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

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

1 个答案: