Помогите оптимизировать и написать глобальную функцию jQuery - PullRequest
Новая
       23

Помогите оптимизировать и написать глобальную функцию jQuery

1 голос
/ 30 марта 2011

У меня будет страница со списком из 10 вопросов.

Каждая строка является вопросом, и у каждого вопроса есть 4 переключателя (горизонтальный неупорядоченный список с использованием фоновых изображений)

КогдаЯ нажимаю переключатель в первом вопросе, я очищаю все экземпляры «проверенного» класса и затем добавляю «проверенный» класс к тому, который щелкнул.Однако кнопки, которые я нажимаю в вопросе 1, не могут мешать кнопкам из вопроса 2. Поэтому мне трудно найти способ сделать эту глобальную функцию, которая запускается всякий раз, когда я нажимаю на ЛЮБОЙ из элементов li.

Вот мой код:

РЕДАКТИРОВАТЬ : Добавлен мой код в jsfiddle.net - http://jsfiddle.net/bnA4g/3/ - Обновлена ​​ссылка 

li {
    list-style-type:none;
    list-style:none;
    display:inline-block;
    white-space:nowrap;
}

.horiz {
    background:url(blankRadio.png) no-repeat center center;
    width:58px;
    height:58px;
}

.checked {
    background:url(checkedBtn.png) no-repeat center center;
    width:58px;
    height:58px;
}

$(function () {
    var row1 = $('div#row1 ul > li');
    var row2 = $('div#row2 ul > li');


        $("ul#row1Btns li").click(function () {
            $(row1).removeClass('checked');
            $(this).addClass('checked');
            console.log('checked');
        });

        $("ul#row2Btns li").click(function () {
            $(row2).removeClass('checked');
            $(this).addClass('checked');
            console.log('checked');
        });
});

    
        </li>
        </li>
        </li>
        </li>
    


    
        </li>
        </li>
        </li>
        </li>

Ответы [ 2 ]

3 голосов
/ 30 марта 2011

Вы можете написать: 

$("div ul > li").click(function () {
    $(this).siblings().removeClass('checked');
    $(this).addClass('checked');
    console.log('checked');
});

это должно делать то, что вы хотели.

0 голосов
/ 30 марта 2011

Я бы добавил класс к вашим строкам и кнопкам вместо того, чтобы обращаться к ним по идентификатору.Затем удалите отмеченный класс из всех строк, а затем добавьте его в только что проверенный. 

<ul class="buttons" id="row1btns">
    <li>...</li>
</ul>

<ul class="questions" id="row1">
    <li>...</li>
</ul>

И ваш сценарий: 

$("ul.buttons li").click(function () {
  $("ul.buttons li").removeClass('checked');
  $(this).addClass('checked');
  console.log('checked');
});

Также заметка стиляВы назначили вашу переменную row1 следующим образом: 

var row1 = $('div#row1 ul > li');

Нет необходимости использовать функцию $ с ней снова, как вы делали здесь: 

$(row1).removeClass('checked');

Достаточно использовать 

row1.removeClass('checked');
...