Question

我正在构建一个页面的好日子，一切都很顺利，直到最后一步。

以下是代码：

$(document) .ready(function(){
    var a;
    var b=0;
    var z="";
    var menu = [
        { name: "LOGO", items: [] },
        { name: "BANNERS", items: ["Banner", "Banner inside the Body"] },
        { name: "HEADERS", items: ["Header1", "Header2", "Header3", "Header4", "Header5"] },
        { name: "BODY TEXT", items: [] },
        { name: "LISTS", items: ["List1", "List2", "List3"] },
        { name: "TABLES", items: ["Table", "Table Text"] },
        { name: "GRAPHS", items: ["Graph1", "Graph2"] },
        { name: "HEADERS/FOOTERS SECTION", items: [] },
        { name: "SPECIAL SECTION", items: ["Special Section1", "Special Section2", "Special Section3", "Special Section4", "Special Section5"] },
    ];

    for (a=0; a<menu.length; a++){
        z+='<div class="menu-enclosure" id="butt-'+a+'"><button class="btn">'+menu[a].name+'</button>';
        while (b<menu[a].items.length) {
            z+='<button class="sub" id="subt-'+b+'">'+menu[a].items[b]+'</button>';
            b++;
        }
        b=0;
        z+="</div>";
    }

    $('.menu-holder') .append(z);

    $(document) .on('click', '.menu-enclosure', function(){
        var clicked =$(this).attr('id');
        var z = clicked.replace(/\D/g, '');
        var x =0;
        $('.content-holder') .html("");
        $('.content-holder') .append('<div class="title-bar"><span class="reg-wht">'+menu[z].name+'</span></div><BR><div class="photo-holder"><img alt="'+menu[z].name+'" src="'+menu[z].name+'"></div>');
        $('.sub') .hide();
        while (x<menu[z].items.length) { 

            $('#'+clicked+' #subt-'+x) .show();
            x++;
        }
        x=0;

        $(document) .on('click', '.sub', function(){
            var clicked =$(this).attr('id');

            $('.content-holder') .append(clicked);
        });
    });
});

此外，这里是JS Fiddle。

https://jsfiddle.net/453azpLr/embedded/result/

如果您访问过我的小提琴，您会注意到除了最后一部分（第50行等）之外一切正常。

正如您在菜单中单击时所看到的那样，单击的任何文本都会反映到内容持有者div。但是，当我点击子菜单时，它不起作用。

我不知道主要问题是什么，或者我是否正确地查看了它，但我尝试将第51行更改为下面的各种内容：

var clicked =$(this).children("button").attr('id');

var clicked =$(this).find("button").attr('id');

var clicked =$(this).children().attr('id');

我也尝试将选择器（.menu-enclosure）更改为按钮的分类和ID，但无济于事。

目前，我正在试图找出点击是否获得正确的ID，因此代码：

    $('.content-holder') .append(clicked);

帮助

Answer 1

如果你将第一位改为：

，它应该有效

$(document).on('click', '.menu-enclosure', function(e) {

  var clicked = e.target.id || this.id;

这将检索点击源自的实际元素而不是父元素。将其更改为此时，打开菜单时返回的元素将不再是包装器div本身，而是第一个子按钮。这个没有id但只有一个类，所以如果它变为空，它将查看下一个父div。

请注意，只要<button class="btn">获得自己的ID，这将不再有效。如果这些按钮从.menu-enclosure父级转移了ID，您可以退出第二次退房。

https://jsfiddle.net/37eyppnh/

顺便说一下，当.menu-enclosure 的ID 转移到按钮时，这也可以起作用：

$(document).on('click', '.menu-enclosure button', function() {

  var clicked = this.id;

$（本）.attr（＆＃39;编号＆＃39;）;不工作

1 个答案: