Question

我正在尝试制作图像滑块，根据<li>中选择的<ol>来滑动图像。如果单击第二个项目符号，则 - >改变背景颜色 - ＆gt;滑到图像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

基于您的代码和您的问题，我很困惑，但如果您尝试让代码工作

function slider() {

    $('.project_selector li').click(function() { 

        $(this).css({'background' : 'black'});

   });
}

Answer 2

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

$('.project_selector')

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

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

选择div中<ol>的第n个孩子</ol>

2 个答案: