0

当我单击动态添加的项目时，我正在尝试更改 css 类。我确实在 doStuffWithThisItem 方法中有该项目，但似乎更改没有保存回 dom 树。但我无法让它工作。你能发现我做错了什么吗？

        <style type="text/css">
        .selectedItem {
            background-color: red;
        }
    </style>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        jQuery(document).ready(function () {

            function doStuffWithThisItem(item) {
                alert(item.id);
                jQuery(item.id).addClass('selectedItem');
            }

            function parseNodes(nodes, level) {

                var ol = document.createElement("ul");
                for (var i = 0; i < nodes.length; i++) {
                    ol.appendChild(parseChildNode(nodes[i], level));
                }

                return ol;
            }

            function parseChildNode(child, level) {

                var li = document.createElement('li');
                jQuery(li).html(child.title)
                    .attr("id", child.id)
                    .click(function () {

                        if (level == 1) {
                            doStuffWithThisItem(this);
                        }

                    });

                return li;
            }

            window.jsonData = [{
                    "title": "Item 1",
                    "id": "item1",
                    "description": "Item 1 description"
                },
                {
                    "title": "Item 2",
                    "id": "item2",
                    "description": "item 2 description"
                }];

            jQuery("#someDiv").html(parseNodes(jsonData, 1));
        });

    </script>


<div id="someDiv"></div>
4

5 回答 5

2

请更换 ：

jQuery(item.id).addClass('selectedItem');

到：

jQuery("#"+item.id).addClass('selectedItem');

您在选择器中有错误

于 2012-12-03T18:02:14.597 回答
1

你已经有了 html 元素，doStuffWithThisItem所以你不需要用它来获取它id，因为你做得不好。

试试这个：

function doStuffWithThisItem(item) {
     alert(item.id);
     jQuery(item).addClass('selectedItem');
}
于 2012-12-03T18:00:35.197 回答
0

您是否尝试过使用 .on 和 .live 处理程序：

jQuery(li).html(child.title)
                .attr("id", child.id)
                .on('click',function () {

                    if (level == 1) {
                        doStuffWithThisItem(this);
                    }

                });

或者

jQuery(li).html(child.title)
                .attr("id", child.id)
                .live('click',function () {

                    if (level == 1) {
                        doStuffWithThisItem(this);
                    }

                });
于 2012-12-03T18:01:09.017 回答
0

我认为这与动态添加的项目有关。我之前遇到过这种情况，并且不得不使用该.on()方法将事件附加到动态添加的项目上。

另外，我认为您的选择器应该只是item，而不是item.id.

于 2012-12-03T18:01:55.350 回答
0 
jQuery(item.id).addClass('selectedItem');

应该是

jQuery('#' + item.id).addClass('selectedItem'); //  OR   jQuery(item)

缺少#ID选择器..

检查小提琴

于 2012-12-03T18:04:11.947 回答