VPF::проблема с выделением div... - Форум программистов

jeans1986

Дата 6.6.2007, 14:28 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 165
Регистрация: 31.3.2007

Репутация: нет
Всего: нет

Даны слои:

Код


<div id="d1">1</div>
<div id="d2">2</div>
<div id="d3">3</div>
<div id="d4">4</div>
....
<div id="dn">n</div>

Как сделать что при шелчке на одном он выделялся каким нибудь цветом. Далее при нажатии на любой другой чтоб у первого выделение удалялось и выделеным стал бы новый обьект. Т.е мне нужен принцип работы с файлами и паками как в windows-е. Заранее всех благодарю.

WIPS

Дата 6.6.2007, 20:26 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 199
Регистрация: 22.5.2006
Где: Украина, Киев

Репутация: 2
Всего: 8

Код


<style>
    .bordered{border: 3px solid black;}
</style>
<script>
    function mark(what)
    {
        what.style.borderColor = 'red';
        what.setAttribute('marked', 1);
        
        var divs = document.getElementsByTagName('div');
        for (var i = 0; i < divs.length; i++)
            if (divs[i].id.indexOf('d') == 0 && divs[i].getAttribute('marked') == 1 && divs[i].id != what.id)
            {
                divs[i].style.borderColor = 'black';
                divs[i].setAttribute('marked', 0);
            }
    }//mark()
</script>
<body>
    <div id="d1" class="bordered" onclick="mark(this)">1</div>
    <div id="d2" class="bordered" onclick="mark(this)">2</div>
    <div id="d3" class="bordered" onclick="mark(this)">3</div>
    <div id="d4" class="bordered" onclick="mark(this)">4</div>
</body>

Вобще советую почитать хотябы основы JavaScript.

--------------------

Автопроизводители, машины, марки, модели!

SelenIT

Дата 6.6.2007, 21:36 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

Как вариант, можно обойтись без цикла при каждом клике и прописывания обработчика у каждого дива:

Код


<style>
div { border: 3px solid black; }
div.marked { border-color: red;}
</style>
<script>
    function mark(e)
    {
        // определяем кликнутый элемент, в W3C-совместимых браузерах и в IE соответственно
        what = e ? e.target : event.srcElement;
        // если кликнут не див, ничего не делаем
        if (what.tagName.toLowerCase() != 'div') return;
        // если есть выделенный элемент - возвращаем ему дефолтный стиль
        if (mark.marked) mark.marked.className = '';
        // применяем стиль выделения к кликнутому диву
        what.className = 'marked';
        // и запоминаем его в статической переменной
        mark.marked = what;
    }

    document.onclick = mark;
</script>
<body>
    <div id="d1">1</div>
    <div id="d2">2</div>
    <div id="d3">3</div>
    <div id="d4">4</div>
</body>

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

WIPS

Дата 6.6.2007, 23:13 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 199
Регистрация: 22.5.2006
Где: Украина, Киев

Репутация: 2
Всего: 8

SelenIT, согласен, у вас получилось гораздо элегантнее. Только я бы все таки оставил проверку id (как альтернатива проверка атрибута какого нитбудь), врядли нам надо иметь возможность выделять любой див на странице, скорее всего это будет касаться какой-то определенной группы.

Код


        // если кликнут не див, ничего не делаем
        if (what.tagName.toLowerCase() != 'div' || what.id.indexOf('d') != 0) return;

--------------------

Автопроизводители, машины, марки, модели!

SelenIT

Дата 7.6.2007, 00:13 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

WIPS, я привел свой пример только как иллюстрацию еще одного подхода. Если уж придираться, недочетов там гораздо больше - не учтена возможность вложенной разметки, не сохраняются старые CSS-классы (если были), обработчик клика "цепляется" к документу устаревшим способом... но я специально пожертвовал всем этим ради простоты и наглядности примера.

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »