Редактор ненумерованного списка

@Авель · Регистрация: 28.10.2010

Author24 — интернет-сервис помощи студентам

Редактор ненумерованного списка c возможностями: удалить элементы списка, помеченные флажками (checkbox), добавить элемент списка в начало списка

@DIGS · 22.05.2012, 20:16

ну так все ж просто, в js кидаем чеккедбоксы, и нумируем, допусти циклом...

@Авель · 23.05.2012, 08:35 **[ТС]**

Сам код был бы понятнее

@GuardCat · 23.05.2012, 09:07

HTML5

 <!DOCTYPE html>
<html>
    <head>
        <title>Редактор списка</title>
    </head>
    <body>
        <input type = "checkbox" id = "checkall">Отметить все
        <ul id = "list">
            <li><input type = "checkbox">Пункт списка 1</li>
            <li><input type = "checkbox">Пункт списка 2</li>
            <li><input type = "checkbox">Пункт списка 3</li>
        </ul>
        
        <input type = "button" value = "Удалить отмеченные" class = "olBut">
        <input type = "button" value = "Добавить элемент" class = "olBut">
 
        <script>
        
        (
            function() { //Завернём все в анонимную функцию, чтобы не захламлять глобальную область видимости
                var 
                    qs = function(selector, all) { //Сокращение стандартной функции для удобства
                        return all ? 
                            document.querySelectorAll(selector):
                            document.querySelector(selector)
                        ;
                    },
                    inputs = qs("#list li input", true),
                    buttons = qs(".olBut", true),
                    list = qs("#list"),
                    checkall = qs("#checkall"),
                    toBorn = function(tag) { //Опять сокращение
                        return document.createElement(tag);
                    }
                ;
                
                buttons[0].onclick = function() { //Удаление пункта
                    var x, li;
                    for (x = inputs.length - 1; x >= 0; x--) {
                        if (inputs[x].checked) {
                            li = inputs[x].parentNode;
                            li.parentNode.removeChild(li);
                        }
                    }
                    inputs = qs("#list li input", true); //Обновим лист
                    if (checkall.checked) checkall.checked = false;
                };
                
                buttons[1].onclick = function() {  // Добавляем пункт
                    var li, text = prompt("Введите текст для пункта меню.");
                    if (!text) return false;
                    
                    li = toBorn("li");
                    li.innerHTML = '<input type = "checkbox">' + text;
                    if (list.children.length) {
                        list.insertBefore(li, list.children[0]);
                    } else {
                        list.appendChild(li);
                    }
                    inputs = qs("#list li input", true);
                }
                
                checkall.onclick = function() { // Отметить/снять все
                    for(var x = 0; x < inputs.length; x++) {
                        inputs[x].checked = this.checked;
                    }
                }
            }
        )()
        
        </script>
    </body>
</html>

@Авель · 29.05.2012, 10:51 **[ТС]**

inputs = qs("#list li input", true),
buttons = qs(".olBut", true),
list = qs("#list"),
checkall = qs("#checkall"),
toBorn = function(tag) { //Опять сокращение
return document.createElement(tag);

Этот кусок не очень понятен, можно объяснить что делают эти строчки?

@GuardCat · 29.05.2012, 11:16

Javascript

inputs = qs("#list li input", true),      // сохраняем в переменной все чекбоксы из списка
buttons = qs(".olBut", true),             // сохраняем в переменной все кнопки
list = qs("#list"),                         // сохраняем в переменной список c id list
checkall = qs("#checkall"),               // сохраняем в переменной чекбокс "отметить всё"
toBorn = function (tag) {                 // делаем упрощённый вариант функции для создания элементов.
  return document.createElement(tag);
}

@Авель 18 / 18 / 15 Регистрация: 28.10.2010 Сообщений: 111
		1
	Редактор ненумерованного списка 22.05.2012, 11:10. Показов 1652. Ответов 5 Метки нет (Все метки) Редактор ненумерованного списка c возможностями: удалить элементы списка, помеченные флажками (checkbox), добавить элемент списка в начало списка 0

@DIGS 15 / 15 / 2 Регистрация: 22.05.2012 Сообщений: 68
	22.05.2012, 20:16	2
	ну так все ж просто, в js кидаем чеккедбоксы, и нумируем, допусти циклом... 0

@Авель 18 / 18 / 15 Регистрация: 28.10.2010 Сообщений: 111
	23.05.2012, 08:35 [ТС]	3
	Сам код был бы понятнее 0

@Авель 18 / 18 / 15 Регистрация: 28.10.2010 Сообщений: 111
	29.05.2012, 10:51 [ТС]	5
	inputs = qs("#list li input", true), buttons = qs(".olBut", true), list = qs("#list"), checkall = qs("#checkall"), toBorn = function(tag) { //Опять сокращение return document.createElement(tag); Этот кусок не очень понятен, можно объяснить что делают эти строчки? 0

	29.05.2012, 11:16