Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как вернуть блок обратно? (https://javascript.ru/forum/jquery/61233-kak-vernut-blok-obratno.html)

Артур_ в_отчаянии 09.02.2016 20:35

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

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

Скрин 1-ый. Оригинал.
Скрин 2-ой. После нажатия на оригинал.
И повторюсь вернуться с нажатого блока на оригинал.

Decode 09.02.2016 21:28

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

<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>

Артур_ в_отчаянии 10.02.2016 14:06

Decode, подскажите, как ещё текст вернуть обратно?

Decode 10.02.2016 15:39

Например, так:
<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>

Артур_ в_отчаянии 10.02.2016 16:41

Decode, выручаете прямо. Спасибо большое, но возвращаемый это ссылка, и после переключения он должен оставаться ссылкой, а так просто текст.

destus 10.02.2016 20:10

<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>

Артур_ в_отчаянии 10.02.2016 20:56

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


Часовой пояс GMT +3, время: 05:59.