DpOLEGapx
@DpOLEGapx
HTML-Верстальщик

Что надо сделать чтобы функция работала на каждый select отдельно?

Добрый день, граждане)
Написал не большой код для стилизации select, но если на странице два select и больше получается очень плохая вещь, можно как-то малой кровью это поправить?)

Так же хотелось бы услышать коментарии по сворачиванию select по клику на body (самый нижний кусок кода), как можно еще реализовать это, и вообще что можно было бы улучшить или уменьшить в коде)

Если можно и возможно все правки на JQ) заранее спасибо:)

jsfiddle.net/ubrgzxke/4
  • Вопрос задан
  • 162 просмотра
Решения вопроса 1
In4in
@In4in
°•× JavaScript Developer ^_^ ו°
Ну как-то так.

Что надо сделать

Прочитать про ключевое слово this и научиться с ним работать.

В вашем коде при каком-либо действии затрагиваются все элементы сразу, к примеру, вы пишите:

option.each(function(i, item){
   list.append('<li>' + $(item).text() + '</li>');
});


И этот код добавит всем элементам .list все элементы option, какие только есть на странице. А на самом деле, у каждого .select свой лист и опции и работать с ними нужно отдельно.

Еще интересные строки:

//Установит всем .selected на странице значение первого select'a
selected.text(select.val());

//Если первый .selected на странице имеет класс focus, скрыть все существующие списки 
container.click(function(){
		if(selected.hasClass('focus')){
			list.slideUp(300, function(){
				selected.removeClass('focus');
			});
			return;
		};

		list.slideDown(300);
		selected.addClass('focus');
	});


UPD: А скрывать списки по нажатию куда-то вне них можно так

$(document).click(function(e) {
        $(e.target).closest(".select").length||
              $(".focus").removeClass("focus")
                    .next(".list").slideUp(300);
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@YNile
JS Developer
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы