Как получить выбранный элемент в древовидной структуре Jquery

Question

Я готов использовать вид дерева jquery. У меня есть категории и подкатегории для выбора элемента, и я хотел бы отобразить их в виде дерева. Я хотел бы получить значение щелчка.

на данный момент я работаю над чем-то вроде:

<ul id="treeview">
    <li>group1a
        <ul>
            <li>group11 </li>
        </ul>
    </li>
    <li>group2 </li>
    <li>group3 </li>
    <li>group4 </li>
    <li>group5 </li>
</ul>

и я попробовал этот скрипт, но функция щелчка выдает мне ошибку.

<script type="text/javascript">
            $().ready(function () {
                $("#treeview").treeview();
            });

            $("#treeview").click(function (e) {
                e.target.addClass("selected");
            });

</script>

Я очень большой новичок в этом Jquery-способе обработки вещей, поэтому я предполагаю, что упускаю какой-то важный момент ... спасибо за вашу помощь ..

Answer 1

addClass - это метод jQuery, а e.target не является объектом jQuery. Вам нужно заключить его в $():

$("#treeview").click(function (e) {
    $(e.target).addClass("selected");
});

Ваш код не будет работать в любом случае, так как событие click привязано только к элементу #treeview, и когда этот элемент срабатывает, e.target всегда будет элементом #treeview. То, что вы ищете, вероятно, что-то вроде этого:

$("#treeview li").click(function() {
    $(this).addClass("selected");
});

Это связывает функцию click со всеми элементами li, и когда один из них щелкается, он добавляет класс «selected» к этому элементу.

Возможно, вы хотите разрешить отмену выбора объектов, поэтому вам следует использовать toggleClass вместо addClass. Если вы хотите разрешить выбор только одного объекта, вы можете использовать это:

$("#treeview li").click(function() {
    // Clear all selected states
    $('#treeview li').removeClass('selected');
    // Set current as selected
    $(this).addClass("selected");
});

Надеюсь, это поможет.

Answer 2

попробовать:

$(document).ready(function(){
    $("#browser").treeview({
        toggle:function(){
            console.log($(this).find('ul li'));
        }
    });

Toggle - это обратный вызов для клика. Значение 'this' представляет собой li, в котором содержится de ul с содержимым дерева. В этом случае консоль найдет все «li», вложенные в «ul»