Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > проблема с выделением div...

Автор: jeans1986 6.6.2007, 14:28

Даны слои:

Код


<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

Код


<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

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

Код


<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

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

Код


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

Автор: SelenIT 7.6.2007, 00:13

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