VPF::Как узнать ID элемента? - Форум программистов

iddqd

Дата 15.5.2008, 10:29 (ссылка)

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

Загрузка ...

Опытный

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

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

Подключен jQuery. А ошибка именно тут

Код


<a href="#" class="user_m" id="text" onclick="showinfo(this)">Some Text</a>

Цитата(Grig @ 15.5.2008, 10:26

)

А что если просто передавать id?

Не помогло. Результат тот же.

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

Grig

Дата 15.5.2008, 10:37 (ссылка)

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

Загрузка ...

Опытный

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

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

Интересное кино.
У объекта А(ссылки) на this передается сама ссылка, а не объект. Это странно.

а this.id все равно работает. Во всех браузерах.

Добавлено через 1 минуту и 12 секунд

Код


<a href="#" class="user_m" id="text" onclick="alert(this.id)">Some Text</a>

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

iddqd

Дата 15.5.2008, 10:50 (ссылка)

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

Загрузка ...

Опытный

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

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

Да, действительно интересно.
Даже прикинуть не могу в чем дело. Поменял на alert и он выводится.
Может Вам стоит взглянуть на код всей страницы?

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script language="javascript" type="text/javascript" src="jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <title>Титл</title>>
</head>

<body>
<script type="text/javascript" language="javascript">
     //$(document).ready(function(){
        //alert($.browser.msie);
    // });
    

    function showInfo(obj)
    {
        $('#info').text('');
        $('#info').append("<img alt='' src='loader.gif' />");
        
        $('#info').fadeOut('slow',
            function()
            {
                //$('#info').slideUp('slow',
                    //function()
                    //{
                        $('#info').load(obj+'.php',
                            function()
                            {
                                $('#info').fadeIn('slow',
                                    function()
                                    {
                                        //$('#info').slideDown('slow');    
                                    }
                                );
                            }
                        );
                    //}
                //);
            }
        );
        
        
    $('a.user_m_selected').attr({class:"user_m"});
    $('a.user_w_selected').attr({class:"user_w"});
    $(obj).attr({class:obj.className + "_selected"});
    }
</script>

<div id="logo"></div>
<a href="#" class="user_m" id="oleg" onclick="showInfo(this.id)">Олег</a>
<a href="#" class="user_w" id="valentina" onclick="showInfo(this.id)">Валентина</a>
<a href="#" class="user_w" id="julia" onclick="showInfo(this.id)">Юлия</a>
<div class="hr" style="margin-top:15px;"></div>
<div id="info">Нажмите на имя человека для получения информации, если она вам конечно нужна.</div>
<div class="hr"></div>
</body>
</html>

Добавлено через 12 минут и 45 секунд
Совсем я что-то с утра плохо соображаю. Ведь у меня в последней строке js используется именно объект.
Вот, вот так даже переделал:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script language="javascript" type="text/javascript" src="jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <title>титл</title>
</head>

<body>
<script type="text/javascript" language="javascript">
    function showInfo(obj)
    {    
        $('#info').load(obj.id+'.php');
        
        
        $('a.user_m_selected').attr({class:"user_m"});
        $('a.user_w_selected').attr({class:"user_w"});
        $(obj).attr({class:obj.className + "_selected"});
    }
</script>

<div id="logo"></div>
<a href="#" class="user_m" id="oleg" onclick="showInfo(this)">Олег</a>
<a href="#" class="user_w" id="valentina" onclick="showInfo(this)">Валентина</a>
<a href="#" class="user_w" id="julia" onclick="showInfo(this)">Юлия</a>
<div class="hr" style="margin-top:15px;"></div>
<div id="info">Нажмите на имя человека для получения информации, если она вам конечно нужна.</div>
<div class="hr"></div>
</body>
</html>

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

Grig

Дата 15.5.2008, 11:07 (ссылка)

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

Загрузка ...

Опытный

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

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

ошибка в этих строчках:

Код


    $('a.user_m_selected').attr({class:"user_m"});
    $('a.user_w_selected').attr({class:"user_w"});
    $(obj).attr({class:obj.className + "_selected"});

Закомментируй их все заработает.
я в jquery не силен, ты что ими сделать хочешь?

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

iddqd

Дата 15.5.2008, 11:20 (ссылка)

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

Загрузка ...

Опытный

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

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

Спасибо, в лисе и ИЕ все заработало, но в Опере перестало smile

Хочу, чтоб при нажатии на имя человека оно оставалась нажатым. Т.е. класс элемента меняется на текущийкласс_selected.
Имен класса всего 2: user_m и user_w для мужчины и для женщины соответсвенно. Там цвета выделения разные.

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

Grig

Дата 15.5.2008, 11:27 (ссылка)

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

Загрузка ...

Опытный

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

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

Код


var obj1=document.getElementById(obj);
obj1.className+="_selected";

Ы?

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

iddqd

Дата 15.5.2008, 11:34 (ссылка)

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

Загрузка ...

Опытный

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

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

Эти строки сначала все выделенные делали не выделенными:

Код


    $('a.user_m_selected').attr({class:"user_m"});
    $('a.user_w_selected').attr({class:"user_w"});

И не работают они в ИЕ потому-что если ничего не выделенно, то $('a.user_m_selected') не существует, а я пытаюсь им манипулировать.Пытаюсь сделать проверки, но все-равно ошибку ИЕ выдает.
А еще по какой-то необъяснимой причине в Опере октазывается работать 9.27. Есть какие-нибудь предположения у Вас?

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

Grig

Дата 15.5.2008, 11:43 (ссылка)

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

Загрузка ...

Опытный

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

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

Код


$('a.user_m_selected').className="user_m"; 
$('a.user_w_selected').className="user_w"; 

var obj1=document.getElementById(obj);
obj1.className+="_selected";

Добавлено через 42 секунды
полностью работающий код:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script language="javascript" type="text/javascript" src="jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <title>Титл</title>>
</head>
<body>
<script type="text/javascript" language="javascript">
     //$(document).ready(function(){
        //alert($.browser.msie);
    // });
    
    function showInfo(obj)
    {
        $('#info').text('');
        $('#info').append("<img alt='' src='loader.gif' />");
        
        $('#info').fadeOut('slow',
            function()
            {
                //$('#info').slideUp('slow',
                    //function()
                    //{
                        $('#info').load(obj+'.php',
                            function()
                            {
                                $('#info').fadeIn('slow',
                                    function()
                                    {
                                        //$('#info').slideDown('slow');    
                                    }
                                );
                            }
                        );
                    //}
                //);
            }
        );

$('a.user_m_selected').className="user_m"; 
$('a.user_w_selected').className="user_w"; 
var obj1=document.getElementById(obj);
obj1.className+="_selected";  
 
    }
</script>
<div id="logo"></div>
<a href="#" class="user_m" id="oleg" onclick="showInfo(this.id)">Олег</a>
<a href="#" class="user_w" id="valentina" onclick="showInfo(this.id)">Валентина</a>
<a href="#" class="user_w" id="julia" onclick="showInfo(this.id)">Юлия</a>
<div class="hr" style="margin-top:15px;"></div>
<div id="info">Нажмите на имя человека для получения информации, если она вам конечно нужна.</div>
<div class="hr"></div>
</body>
</html>

Добавлено через 2 минуты и 20 секунд
а библиотечка хорошая, надо бы покопать =)

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

iddqd

Дата 15.5.2008, 11:52 (ссылка)

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

Загрузка ...

Опытный

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

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

Библиотека шикарная, но код не работает smile

Код


        $('a.user_m_selected').className="user_m"; 
        $('a.user_w_selected').className="user_w";

Этот код не сбрасывает имя класса.

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

Grig

Дата 15.5.2008, 12:11 (ссылка)

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

Загрузка ...

Опытный

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

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

если все правильно понял, то вот:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script language="javascript" type="text/javascript" src="jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <title>Титл</title>
    <style>
    .user_m{
        color:green;
    }
    .user_w{
        color:red;
    }
    .user_m_selected{
        color:yellow;
    }
    .user_w_selected{
        color:orange;
    }
    </style>    
</head>
<body>
<script type="text/javascript" language="javascript">
     //$(document).ready(function(){
        //alert($.browser.msie);
    // });
    
    function showInfo(obj)
    {
     var obj1=document.getElementById(obj);
     
        $('#info').text('');
        $('#info').append("<img alt='' src='loader.gif' />");
        
        $('#info').fadeOut('slow',
            function()
            {
                //$('#info').slideUp('slow',
                    //function()
                    //{
                        $('#info').load(obj+'.php',
                            function()
                            {
                                $('#info').fadeIn('slow',
                                    function()
                                    {
                                        //$('#info').slideDown('slow');    
                                    obj1.className=obj1.className.replace("_selected", "");    
                                    }
                                );
                            }
                        );
                    //}
                //);
            }
        );


obj1.className+="_selected";  
 
    }
    
</script>
<div id="logo"></div>
<a href="#" class="user_m" id="oleg" onclick="showInfo(this.id);">Олег</a>
<a href="#" class="user_w" id="valentina" onclick="showInfo(this.id)">Валентина</a>
<a href="#" class="user_w" id="julia" onclick="showInfo(this.id)">Юлия</a>
<div class="hr" style="margin-top:15px;"></div>
<div id="info">Нажмите на имя человека для получения информации, если она вам конечно нужна.</div>
<div class="hr"></div>
</body>
</html>

Это сообщение отредактировал(а) Grig - 15.5.2008, 12:14

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

iddqd

Дата 15.5.2008, 12:20 (ссылка)

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

Загрузка ...

Опытный

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

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

Выделяется по-прежнему, но при нажатии на другое имя прошлое выделение не пропадает.

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

Grig

Дата 15.5.2008, 12:30 (ссылка)

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

Загрузка ...

Опытный

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

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

ну теперь наверное все =)

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script language="javascript" type="text/javascript" src="jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <title>Титл</title>
    <style>
    .user_m{
        color:green;
    }
    .user_w{
        color:red;
    }
    .user_m_selected{
        color:yellow;
    }
    .user_w_selected{
        color:orange;
    }
    </style>    
</head>
<body>
<script type="text/javascript" language="javascript">
     //$(document).ready(function(){
        //alert($.browser.msie);
    // });
    
    function showInfo(obj)
    {
     var a_href=document.getElementsByTagName("A");

     for (var i=0;i<a_href.length;i++){
         a_href[i].className=a_href[i].className.replace("_selected", "");
        }
     var obj1=document.getElementById(obj);
     
        $('#info').text('');
        $('#info').append("<img alt='' src='loader.gif' />");
        
        $('#info').fadeOut('slow',
            function()
            {
                //$('#info').slideUp('slow',
                    //function()
                    //{
                        $('#info').load(obj+'.php',
                            function()
                            {
                                $('#info').fadeIn('slow',
                                    function()
                                    {
                                        //$('#info').slideDown('slow');    
                                    //obj1.className=obj1.className.replace("_selected", "");    
                                    }
                                );
                            }
                        );
                    //}
                //);
            }
        );

obj1.className+="_selected";  
 
    }
    
</script>
<div id="logo"></div>
<a href="#" class="user_m" id="oleg" onclick="showInfo(this.id);">Олег</a>
<a href="#" class="user_w" id="valentina" onclick="showInfo(this.id)">Валентина</a>
<a href="#" class="user_w" id="julia" onclick="showInfo(this.id)">Юлия</a>
<div class="hr" style="margin-top:15px;"></div>
<div id="info">Нажмите на имя человека для получения информации, если она вам конечно нужна.</div>
<div class="hr"></div>
</body>
</html>

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

ksnk

Дата 15.5.2008, 17:18 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

iddqd, Для работы с классом в jQuery применяют функции addClass, hasClass, removeClass и toggleClass.

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

iddqd

Дата 15.5.2008, 20:06 (ссылка)

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

Загрузка ...

Опытный

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

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

Grig, дада. Спасибо огромное ++

Добавлено через 1 минуту и 32 секунды
ksnk, но как это можно применить в моем случае?
Получить массив всех элементов a и в цикле проверить (if($obj).hasClass(.class))?
Или можно сделать как-то изящней?

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

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