Выбор n-го дочернего элемента <ol> в div

Question

Выбор n-го дочернего элемента <ol> в div

0

Я пытаюсь создать слайдер изображения, который отображает изображения, в соответствии с которыми <li> выбран в <ol>. Если щелкнуть вторую пулю, то → изменить цвет фона → со слайдом на изображение 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>

Как мне это сделать?

Brian 27 фев. 2014, в 00:23

Источник

Теги:

jquery

click

css-selectors

html-lists

2 ответа

0

основанный на вашем коде и ваш вопрос, я запутался, но если вы пытаетесь заставить свой код работать

function slider() {

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

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

   });
}

rizzo0917 26 фев. 2014, в 20:48

Ещё вопросы

silkfire · Accepted Answer · 2014-02-26T20-47-00.000Z

Прежде всего, при выборе класса с 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');
   });
}