javascript - jQuery:使用正确的选择器在对象上未定义

Question

我遇到了 jQuery 问题:我有以下 html 代码:

<div class="side-finder">
<div class="brand"><img src="/img/test.net-logo.png" /></div>
<div class="finder-content">
    <ul class="nav nav-pills nav-stacked" id="finder-menu">
        <li>
            <a href="#!cat/cars" class="slide-left1" data-toggle="slide-left" data-source="#sc1" data-step="1" role="button" aria-expanded="false">Autos &gt;</a>
            <ul class="hide" id="sc1">
                <li>
                    <a href="#!cat/cars" class="slide-left2" data-toggle="slide-left" data-source="#sc1.1423423" data-step="2" role="button" aria-expanded="false">Bauteile &gt;</a>
                    <ul class="hide" id="sc1.1423423">
                        <li><a href="#">Innenfutter</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li class="divider"></li>
                        <li><a href="#" class="btn-back1">&lt; Zurück</a></li>
                    </ul>
                </li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#" class="btn-back1">&lt; Zurück</a></li>
            </ul>
        </li>
    </ul>
    <ul class="nav nav-pills nav-stacked hide" id="finder-child1">
    </ul>
    <ul class="nav nav-pills nav-stacked hide" id="finder-child2">
    </ul>
</div>

这个 jQuery 代码:

    var $finderTopObj = $('#finder-menu');
    var $originalTopHtml = $finderTopObj.html();

    $('.slide-left1').click(function(e) {
        console.log('click 1');
        var $clickedItem = $(this);
        var $sourceId = $(this).attr('data-source');
        console.log('step 2 ('+$sourceId+')');

        $clickedItem.addClass('active');
        var $sourceHtml = $($sourceId).html();
        var $targetObj = $('#finder-child1');
        console.log('set html to '+$targetObj.selector);
        $targetObj.html($sourceHtml);
        $finderTopObj.animate({
            width: "50%"
        }, 200, function () {
            $finderTopObj.addClass('col-md-6');
            $targetObj.addClass('col-md-6');
            $targetObj.removeClass('hide');
            console.log('done step 1------------');

            $('.slide-left2').click(function(e) {
                console.log('click 2');
                var $clickedItem2 = $(this);
                var $sourceId2 = $clickedItem2.attr('data-source');
                console.log('step 2 ('+$sourceId2+')');

                $clickedItem2.addClass('active');
                var $sourceHtml2 = $($sourceId2).html();
                console.log($sourceHtml2);
                var $targetObj2 = $('#finder-child2');
                console.log('set html to '+$targetObj2.selector);
                $targetObj2.html($sourceHtml2);
                $finderTopObj.animate({
                    width: "33%"
                }, 200, function () {
                    $finderTopObj.removeClass('col-md-6');
                    $finderTopObj.addClass('col-md-4');
                    $targetObj.removeClass('col-md-6');
                    $targetObj.addClass('col-md-4');
                    $targetObj.animate({
                        width: "33%"
                    }, 200, function () {
                        $targetObj2.addClass('col-md-4');
                        $targetObj2.removeClass('hide');
                        console.log('done step 2------------');
                    });
                });
            });
        });
    });

问题是:var“$sourceHtml2”未定义，我找不到错误的代码。有人可以帮忙吗？谢谢!

用于测试:它基于 bootstrap 3。也许这个 css 代码也有助于测试它。

.side-finder {
    font-size: 12px;
    font-weight: 200;
    background-color: #2e353d;
    top: 0px;
    width: 100%;
    color: #333333;
    height: 100vh;
}

.side-finder .brand {
    background-color: #23282e;
    line-height: 50px;
    display: block;
    text-align: center;
    font-size: 14px;
}

.side-finder li a, .side-finder li a:hover,.side-finder li a:focus {
    background-color: transparent;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    color: #cacaca;
    font-weight: bold;
    border-bottom: 1px solid #53585e;
}

.side-finder li a:hover {
    color: #efefef;
}

.side-finder li a.active  {
    background-color: #3e656d;
}

.side-finder .finder-content {
    overflow: auto;
    height: 100%;
}

Answer 1

您的数据属性如下所示

#sc1.1423423

记下句点，然后进行一些获取并使用变量，最终得到

$('#sc1.1423423')

请注意它如何匹配 ID 为 sc1 的元素和类 1423423
为了使其在 jQuery 中工作，必须转义句点

$('#sc1\\.1423423')

正确的做法是不在 ID 中使用句点，但如果这不是一个选项，您可以尝试替换它

$sourceId2 = $clickedItem2.attr('data-source').replace('.', '\\.');