在 div 中选择第 n 个子项<ol>

Question

我正在尝试制作一个图像滑块，它根据在<ol>中选择的<li>来滑动图像。如果单击第二个项目符号，则 ->更改背景的颜色 ->滑动到图像 2。

这是我尝试过的：

            $(document).ready(function() {
        gallery_image_slider();
        slider();
    });
    function slider() {
        $('project_selector>ol>li:nth-child(1)').click(function() { 
            $('project_selector>ol>li:nth-child(1)').css('background' : 'black');
    }  );

<div class="projects">
            <h1>Current Projects</h1>
        <div class="current_projects" align="center">
            <div class="projects_gallery" align="center">
                <table align="center">
                     <tr>
                        <th>
                            <div class="project_desc_1">
                            Project Description 1
                            </div>
                            <div class="project_desc_2">
                            Project Description 2
                            </div>
                        </th>
                    </tr>
                     <tr>
                        <th>
                            <div class="slide"><img src="./images/blivori.png"/ id="project1"></div>
                            <div class="slide"><img src="./images/blivori.png"/ id="project2"></div>
                        </th>
                    </tr>
                     <tr>
                        <th>
                            <ol class='project_selector'>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ol>
                        </th>
                    </tr>           
                     <tr>
                        <th>
                            <label id="description1">Description 1</label>
                            <label id="description2">Description 2</label>
                        </th>
                    </tr>   
                </table>
            </div>
            </div>
        </div>

我该怎么做？

Answer 1

首先，在使用 jQuery 选择类时，您需要在其名称前加上一个句点 （ . ），如下所示：

$('.project_selector')

其次，我可以看到您的project_selector列表中没有<ol>标签。我不确定你想通过li:nth-child(1)获得什么，但是如果你的目的是选择第一个<li>，那么你将使用.eq()方法并指定它的第一个参数，即你感兴趣的<li>索引，从零开始。

function slider() {
   $(document).on('click', '.project_selector > li:eq(0)', function() {
        $(this).css('background-color', 'black');
   });
}

Answer 2

根据您的代码和您的问题，我很困惑，但是如果您试图让您的代码正常工作

function slider() {
    $('.project_selector li').click(function() { 
        $(this).css({'background' : 'black'});
   });
}