Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.02.2016, 20:35
Новичок на форуме
Отправить личное сообщение для Артур_ в_отчаянии Посмотреть профиль Найти все сообщения от Артур_ в_отчаянии
 
Регистрация: 09.02.2016
Сообщений: 8

Как вернуть блок обратно?
Вечер народ. Есть блок, который можно выбрать. Выбор осуществляется нажатием на упаковку или на текст "купи" в описании. Можно отменить выбор повторным нажатием на блок и здесь у меня вопрос, как вернуть голубой блок с розового?

Переход:
var chan = $('.changes_1');
    chan.click(function(){
      $('#block_1').css({'border':'solid 6px #E72E7A'});
      $('.circle_1').css({'background-color':'#E72E7A'});
      $('#ad').text('Печень утки разварная с артишоками.');
     });

Скрин 1-ый. Оригинал.
Скрин 2-ой. После нажатия на оригинал.
И повторюсь вернуться с нажатого блока на оригинал.
Изображения:
Тип файла: jpg Страница - 1.jpg (10.7 Кб, 8 просмотров)
Тип файла: jpg Страница - 2.jpg (9.9 Кб, 6 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 09.02.2016, 21:28
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

Артур_ в_отчаянии, надо отдельные стили сделать для нажатого состояния. Потом просто переключать их.

<style>
    .block {
        width: 200px;
        height: 100px;
        border: 2px solid #ccc;
    }

    .active {
        background: #ccc;
    }
</style>

<div class="block">
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    $('.block').on('click', function(event) {
        $(this).toggleClass('active');
    });
</script>
Ответить с цитированием
  #3 (permalink)  
Старый 10.02.2016, 14:06
Новичок на форуме
Отправить личное сообщение для Артур_ в_отчаянии Посмотреть профиль Найти все сообщения от Артур_ в_отчаянии
 
Регистрация: 09.02.2016
Сообщений: 8

Decode, подскажите, как ещё текст вернуть обратно?
Ответить с цитированием
  #4 (permalink)  
Старый 10.02.2016, 15:39
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

Например, так:
<style>
    .block {
        width: 200px;
        height: 100px;
        border: 2px solid #ccc;

    }

    .active {
        background: #ccc;
    }
</style>
<div class="block">
    <p>Bla-bla</p>
</div>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    var txt = $('.block').children('p').text();

    $('.block').on('click', function(event) {

        $(this).toggleClass('active');
        $(this).children('p').text( $(this).children('p').text() == txt ? 'Tra-ta-ta' : txt);
    });
</script>
Ответить с цитированием
  #5 (permalink)  
Старый 10.02.2016, 16:41
Новичок на форуме
Отправить личное сообщение для Артур_ в_отчаянии Посмотреть профиль Найти все сообщения от Артур_ в_отчаянии
 
Регистрация: 09.02.2016
Сообщений: 8

Decode, выручаете прямо. Спасибо большое, но возвращаемый это ссылка, и после переключения он должен оставаться ссылкой, а так просто текст.
Ответить с цитированием
  #6 (permalink)  
Старый 10.02.2016, 20:10
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

<style>
        .block {
            width: 200px;
            height: 100px;
            border: 2px solid #ccc;
        }

        .active {
            background: #ccc;
        }
    </style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $(function () {
            var txt = $('.block').children('p').html();

            $('.block').on('click', function (event) {

                $(this).toggleClass('active');
                ($('.block').children('p').html() == txt) ? $('.block').children('p').text('Тратата') : $('.block').children('p').html(txt);
            });
           
        })
    </script>

    <div class="block">
        <p><a href="#">Bla-bla</a></p>
    </div>
Ответить с цитированием
  #7 (permalink)  
Старый 10.02.2016, 20:56
Новичок на форуме
Отправить личное сообщение для Артур_ в_отчаянии Посмотреть профиль Найти все сообщения от Артур_ в_отчаянии
 
Регистрация: 09.02.2016
Сообщений: 8

destus, не перевелись ещё хорошие аспиранты на Руси. Спасибо!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как скрыть блок div по ключевому слову Sacred13 Элементы интерфейса 6 06.08.2013 19:13
Как добавить блок зума не переж body а в необходимый блок? ilyas-> Элементы интерфейса 0 30.07.2013 15:27
Как вернуть результат из ajax внутри функции? Rooner AJAX и COMET 4 29.03.2013 19:15
Как сделать блок, исчезающий вверху страницы? TRos Элементы интерфейса 7 12.04.2012 08:59
Подскажите, как вернуть js-скрипт массив Polkan AJAX и COMET 18 30.04.2010 23:30