Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.06.2015, 00:18
Новичок на форуме
Отправить личное сообщение для Rockship Посмотреть профиль Найти все сообщения от Rockship
 
Регистрация: 16.06.2015
Сообщений: 4

Не работает код, при дублировании блоков!
Умные люди, прошу Вашей помощи.
Суть вопроса. Есть такой код:
<div class="block_disc">
            	<img class="cover_disc" src="img/disc_Lonesome_Crow_1.jpg">
                <div class="disc_descript">
                   	 <div class="disc_link">
                       	<a id="link1" class="disc_a" href="#">Описание</a>
                     </div>
                   	 <div class="disc_link top-right_radius">
                       	<a id="link2" class="disc_a top-right_radius"href="#">Треки-лист</a>
                     </div>
                </div>
                <div id="div1" class="disc_content1">
                </div>
                <div id="div2" class="disc_content2">
                </div>
        	</div>

Вот код JS:
$(function() {
     $("#link2").click(function() {
             $($(this).closest('.block_disc').children("#div1")).removeClass("disc_content_anim1");
			 $($(this).closest('.block_disc').children("#div1")).removeClass("disc_content_anim2");
			 $($(this).closest('.block_disc').children("#div2")).removeClass("disc_content_anim1");
			 $($(this).closest('.block_disc').children("#div2")).removeClass("disc_content_anim2");
			 $($(this).closest('.block_disc').children("#div1")).addClass("disc_content_anim2");
			 $($(this).closest('.block_disc').children("#div2")).addClass("disc_content_anim1");
     });
	 $("#link1").click(function() {
             $($(this).closest('.block_disc').children("#div1")).removeClass("disc_content_anim1");
			 $($(this).closest('.block_disc').children("#div1")).removeClass("disc_content_anim2");
			 $($(this).closest('.block_disc').children("#div2")).removeClass("disc_content_anim1");
			 $($(this).closest('.block_disc').children("#div2")).removeClass("disc_content_anim2");
			 $($(this).closest('.block_disc').children("#div1")).addClass("disc_content_anim1");
			 $($(this).closest('.block_disc').children("#div2")).addClass("disc_content_anim2");
     });
});

Мне необходимо, чтобы при клике на #link1 у блоков #div1 и #div2 появлялись классы .disc_content_anim1 и .disc_content_anim2 соответственно. А при клике на #link2 классы появились наоборот (#div1->.disc_content_anim2, #div2->.disc_content_anim1) . И вроде этот код работает (хотя, я уверен, что можно сделать проще). НО!!! Возникает проблема. Блоков div.block_disc у меня будет достаточно много. Вот и получается, что когда я начинаю блоки div.block_disc дублировать, то js срабатывает только на первом блоке, а на остальных не хочет. Уже голова кипит(((
Ответить с цитированием
  #2 (permalink)  
Старый 17.06.2015, 00:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,979

Rockship,
что делают ваши классы .disc_content_anim1 и .disc_content_anim2 ?
и вы в курсе что id уникально?
Ответить с цитированием
  #3 (permalink)  
Старый 17.06.2015, 01:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,979

Открывашка 219 смена классов
Открывашка 219
<!DOCTYPE HTML>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .disc_content1 {
            overflow: hidden;
            height: 0px;
            background-color: rgb(0, 255, 0);
            -webkit-transition: all 0.3s ease;
            /* анимация для chrome */

            -moz-transition: all 0.3s ease;
            /* анимация для firexox */

            -o-transition: all 0.3s ease;
            /* анимация для opera */

            transition: all 0.3s ease;
            /* анимация для остальных браузеров */
        }

        .disc_content2 {
            overflow: hidden;
            height: 0px;
            background-color: rgb(255, 255, 0);
            -webkit-transition: all 0.3s ease;
            /* анимация для chrome */

            -moz-transition: all 0.3s ease;
            /* анимация для firexox */

            -o-transition: all 0.3s ease;
            /* анимация для opera */

            transition: all 0.3s ease;
            /* анимация для остальных браузеров */
        }

        .disc_content_anim1 {
            height: 100px;
        }

        .disc_content_anim2 {
            height: 0px;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>
  $(function() {
            var s = $(".block_disc");
            s.each(function(indx, el) {
                var a = $("a", el),
                    d = $(".disc_content1, .disc_content2", el);
                $(el).on("click", "a", function(event) {
                    event.preventDefault();
                    var i = a.index(this),
                        elem = d.eq(i),
                        add = elem.is(".disc_content_anim1");
                    d.removeClass("disc_content_anim1").addClass("disc_content_anim2");
                    !add && elem.removeClass("disc_content_anim2").addClass("disc_content_anim1");
                });
                a.first().click()
            });

        });    
</script>
</head>

<body>
    <div class="block_disc">
        <img class="cover_disc" src="img/disc_Lonesome_Crow_1.jpg">
        <div class="disc_descript">
            <div class="disc_link">
                <a id="link1" class="disc_a" href="#">Описание</a>
            </div>
            <div class="disc_link top-right_radius">
                <a id="link2" class="disc_a top-right_radius" href="#">Треки-лист</a>
            </div>
        </div>
        <div id="div1" class="disc_content1">Описание1
        </div>
        <div id="div2" class="disc_content2">Треки-лист1
        </div>
    </div>
    <div class="block_disc">
        <img class="cover_disc" src="img/disc_Lonesome_Crow_1.jpg">
        <div class="disc_descript">
            <div class="disc_link">
                <a id="link1" class="disc_a" href="#">Описание</a>
            </div>
            <div class="disc_link top-right_radius">
                <a id="link2" class="disc_a top-right_radius" href="#">Треки-лист</a>
            </div>
        </div>
        <div id="div1" class="disc_content1">Описание2
        </div>
        <div id="div2" class="disc_content2">Треки-лист2
        </div>
    </div>


</body>

</html>

Последний раз редактировалось рони, 17.06.2015 в 10:59.
Ответить с цитированием
  #4 (permalink)  
Старый 17.06.2015, 05:34
Новичок на форуме
Отправить личное сообщение для Rockship Посмотреть профиль Найти все сообщения от Rockship
 
Регистрация: 16.06.2015
Сообщений: 4

рониСпасибо большое!!! Про id совсем забыл ((. Да и вариант Ваш гораздо интереснее))). А эти классы просто добавляют анимацию.

Делаю девушке контрольную)) в универ, она вообще ни в зуб ногой))). Вот пришлось мне разбираться сидеть. Притом что я инженер-технолог, пишу программы для станков с ЧПУ
Ответить с цитированием
  #5 (permalink)  
Старый 17.06.2015, 10:48
Новичок на форуме
Отправить личное сообщение для Rockship Посмотреть профиль Найти все сообщения от Rockship
 
Регистрация: 16.06.2015
Сообщений: 4

Ещё один вопрос возник. Как сделать, что бы если один блок раскрыт,, то второй скрыт? При нажатии на вторую ссылку первый блок скрылся, а второй раскрылся. Причем когда загружаешь страницу, первый блок должен быть раскрыт?
Ответить с цитированием
  #6 (permalink)  
Старый 17.06.2015, 10:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,979

Сообщение от Rockship
Как сделать, что бы если один блок раскрыт,, то второй скрыт?
а разве сейчас не так?
Ответить с цитированием
  #7 (permalink)  
Старый 17.06.2015, 11:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,979

Сообщение от Rockship
Причем когда загружаешь страницу, первый блок должен быть раскрыт?
добавлена строка 66 смотреть пост 3 -- но по нормальному это делается через css
Ответить с цитированием
  #8 (permalink)  
Старый 17.06.2015, 11:29
Аватар для KosBeg
Профессор
Отправить личное сообщение для KosBeg Посмотреть профиль Найти все сообщения от KosBeg
 
Регистрация: 22.05.2015
Сообщений: 384

Сообщение от рони
но по нормальному это делается через css
знакомый у вас css код
я где-то его встречал
Ответить с цитированием
  #9 (permalink)  
Старый 17.06.2015, 11:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,979

Сообщение от KosBeg
я где-то его встречал
да я и скрипт где-то видел раз двести примерно
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не работает ajax при OnClick по ссылке firefox govorusha AJAX и COMET 8 06.06.2015 14:34
При подгрузке методом .load не работает input type=file sameness Общие вопросы Javascript 11 18.02.2015 12:21
Собственно код работает только при window.onload() sl1m Events/DOM/Window 9 26.03.2014 15:54
Скрипт не работает при заходе на данную страницу, но работает при рефреше страницы foker jQuery 0 26.11.2012 10:27
Код не работает в седьмом Эксплорере... vol4ara Общие вопросы Javascript 0 14.07.2008 17:53