webew
Войти » Регистрация
 
JavaScript

замена для getElementById, нужно обращение к классу

22 февраля 2012, 19:40
Автор: knoot0279
getElementById обращается к элементу с назначенным ид, а как обратиться к классу?

Такая ситуация, есть куча аддонов для WoW сейчас все выводится при наведении на слово "Описание"(оформленное конечно), а нужно чтобы при клике по названию аддона разворачивалось описание, как сделать это без помощи классов понятия не имею, т.к ид вводить для каждого это непосильный труд(сейчас с десяток аддонов, но что будет дальше? их же несколько сотен, если не тысяч), а т.к класс это штука масштабная то ее будет правильнее использовать, и тут загвоздка... не могу заставить скрипт обращаться к классу.

Подскажите замену для getElementById или может еще вариант есть?

Используемый скрипт.


function smena(){
    var text = document.getElementById('text');
    if(text.style.display == 'none')
    {
        text.style.display = 'block';
    }
    else
    {
        text.style.display = 'none';
    }
}






сам скрипт рабочий...
Добавить комментарий
Отображение комментариев: Древовидное | Плоское

1234ru

Для начала Вам следует подключить библиотеку jQuery (можно эту задачу решить и на чистом javascript, без использования сторонних библиотек, но это незачем).

Предлагаю такую схему (функция smena() не понадобится):

<script src="http://code.jquery.com/jquery.min.js"></script>

<style>
    .addons-menu .text { display: none; }
    .addons-menu .text.show { display: block; }
</style>

<ul class="addons-menu">
    <li>
        <div class="title">Название</div>
        <div class="text">Описание</div>
    </li>
    ...
    <!-- и т.д. -->
</ul>

<script>
    $('.addons-menu .title').click(function() {
        // так выглядит назачение обработчика
        // события click всем элементам,
        // подходящим под селектор .addons-menu > li > .title
        // средствами jQuery
        // (подробнее см. http://api.jquery.com/click)
       
        // код ниже будет работать
        // с каждым блоком .title в отдельности
       
        var t = $(this), // для удобства сразу делаем
                         // jQuery-экземпляр HTML-элемента
                         // (чтобы можно было обращаться
                         // к необходимым методам и др.)
            target = t.siblings('.text'); // см. api.jquery.com/siblings
           
        target.toggleClass('show');
    });
</script>
То, что не убивает нас, делает нас инвалидами.
22.02.2012, 22:49
Ответить
NO USERPIC

knoot0279

вы гений))
немножко переделать(ну это дело вкуса), а так очень даже интересно получается, спасибо
22.02.2012, 23:29
Ответить

1234ru

Гений - John Resig :)
То, что не убивает нас, делает нас инвалидами.
22.02.2012, 23:42
Ответить
NO USERPIC

knoot0279

<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
    $('.addons-menu .title').click(function() {
        var t = $(this),
            target = t.siblings('.text');
        target.toggleClass('show');
    });
</script>


я себе так представляю работу скрипта...
1.Клик
2.Найти class="addons-menu"
3.Внутри него найти class="title" именно тот на который собственно нажали
4.Затем найти рядом стоящий class="text"
5.Поменять значение с class="text" на class="text.show"

но тут вопрос, где обратная инструкция(т.к она естественно нужна)?

я просто в этом вобще не понимаю почти, так... почитал немного, вобщем только начинаю.

я вроде не тупой, но что-то он не хочет у меня работать.
23.02.2012, 00:01
Ответить

1234ru

Не совсем так.

1. Найти все, относящиеся к .title, которые внутри .addons-menu.
2. Им (каждому) на click назначить инструкцию, по которой берется соседний (для каждого) .text
3. У каждого найденного text проверить наличие класса "show", в случае наличия - убрать, в случае отсутствия - добавить.

Должен работать. Я прямо такой код, как приведен выше, вставил в файл и открыл файл в браузере - работал.
То, что не убивает нас, делает нас инвалидами.
23.02.2012, 00:11
Ответить
NO USERPIC

knoot0279

В принципе наши списки событий похожи, но это не важно, важно то, что вы объяснили мне присутствие обратной инструкции, снова спасибо вам.

да, так же в свободном html вставил, сработало. буду думать почему не сработало на полноценной стр.
23.02.2012, 00:16
Ответить

1234ru

Ситуацию может серьезно прояснить консоль расширения firebug для Firefox (для этого Firefox можно даже специально поставить, если у Вас его нет).
После установки откройте страницу, нажмите F12 и выберите вкладку Консоль - там будут показаны ошибки Javascript, если они есть.
То, что не убивает нас, делает нас инвалидами.
23.02.2012, 00:50
Ответить
NO USERPIC

knoot0279

да, я знаю этот плагин...
проблема оказалась в очередности, хотя я не вижу разницы, то ли сначала идет


<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$('.addons-menu .title').click(function() {
var t = $(this),
target = t.siblings('.text');
target.toggleClass('show');
});
</script>

либо

<script src="http://code.jquery.com/jquery.min.js"></script>

может вы разницу подскажете?
от перемены мест этих скриптов и страдала работоспособность
23.02.2012, 01:05
Ответить

1234ru

Скрипты исполняются в той очередности, в которой они указаны на странице.
Очевидно, попытка пользоваться инструментами библиотеки до того, как она будет загружена, терпит неудачу, поэтому и не работает второй вариант.
То, что не убивает нас, делает нас инвалидами.
23.02.2012, 01:34
Ответить
NO USERPIC

knoot0279

ясно, спасибо
23.02.2012, 01:36
Ответить
NO USERPIC

knoot0279

залил все на сайт, и там сразу же проблема... как ни кручу не разворачивает
http://webew.ru/f/k3ckH20T.txt
http://webew.ru/f/QBSlF1w7.js
здесь вроде все правильно

может ли он не работать из за добавления (не знаю чем, наверное движком все же) <![CDATA[ // ]]>

то есть так...
<script type="text/javascript">// <![CDATA[
$('.addons-menu .title').click(function() {
        var t = $(this),
            target = t.siblings('.text');
        target.toggleClass('show');
    });
// ]]> </script>
23.02.2012, 03:28
Ответить

1234ru

В строке "// ]]> </script>" закрывающий </script> попадает в комментарий, т.е. тэг <script> оказывается незакрытым со всеми вытекающими последствиями.
От этого и не работает.
То, что не убивает нас, делает нас инвалидами.
23.02.2012, 17:32
Ответить
NO USERPIC

knoot0279

может подскажете как поступить если он никак не убирает <![CDATA[ // ]]> , все что угодно делал(правда, не влезал в глубь движка)... не помогает.

или только 1 вариант - лезть в движок и смотреть от куда это идет?
23.02.2012, 18:40
Ответить

1234ru

Ну как поступишь, если тэг незакрытый? :)
Теоретически можно вместо одного закрывающего </script> поставить два, но это костыль на костыле, который может потом выйти боком.
Так что лучше найдите, откуда это растет, или уберите уже после формирования страницы (например, с помощью str_replace).
То, что не убивает нас, делает нас инвалидами.
23.02.2012, 19:21
Ответить
NO USERPIC

knoot0279

я повторюсь, я в яваскриптах почти ничего не понимаю :). если можно то объясните

ну то есть вот неизбежный код...
<script type="text/javascript">// <![CDATA[
$('.addons-menu .title').click(function() {
        var t = $(this),
            target = t.siblings('.text');
        target.toggleClass('show');
    });
// ]]> </script>


и куда вставлять str_replace?
23.02.2012, 19:26
Ответить

1234ru

Не, такая неизбежность не пойдет. Нужно //]]> убрать.

str_replace - это речь про PHP (т.е. то, что происходит на сервере при формировании HTML-кода, до отдачи его браузеру).
То, что не убивает нас, делает нас инвалидами.
23.02.2012, 19:31
Ответить
NO USERPIC

knoot0279

ужасно) буду искать...

а то что
<script type="text/javascript">
$('.addons-menu .title').click(function() {
        var t = $(this),
            target = t.siblings('.text');
        target.toggleClass('show');
    }); </script>




не работает внутри <head> </head>
это нормально???
23.02.2012, 20:05
Ответить
NO USERPIC

knoot0279

мое предыдущее сообщение навело мою дикую голову на гениальную мысль, зачем пихать в <head> и зачем пихать в код(ну тот где описано содержимое стр, там добавлялось <![CDATA[ // ]]> ), если все можно забить в футер)) идеальное место,
1 - ничто не влияет на его код
2 - поставить не сложнее чем в <head>
3 - запоминаемое место
4 - работает :)


<script src="http://code.jquery.com/jquery.min.js"></script> отлично прижился в центре(место где описано содержимое стр, там добавлялось <![CDATA[ // ]]> )

ну и
<style>
.addons-menu .text { display: none; }
.addons-menu .text.show { display: block; }
</style>

прижился в <head></head> как и положено :) проблема решена, большое спасибо за поддержку
23.02.2012, 19:43
Ответить

1234ru

Для порядка попробуйте подключение jquery в <head> переставить.
(возможно, в будущем Вы ей станете пользоваться - пусть в начале страницы грузится)
То, что не убивает нас, делает нас инвалидами.
24.02.2012, 17:11
Ответить
Добавить комментарий
Отображение комментариев: Древовидное | Плоское
© 2008—2017 webew.ru, связаться: x собака webew.ru
Сайт использует Flede и соответствует стандартам WAI-WCAG 1.0 на уровне A.
Rambler's Top100

Реклама: