Замена содержимого и появление div при клике. Как реализовать?

Question

[Михаил Губер]

Здравствуйте!
Есть клавиша, например, Open. Пытаюсь написать простой скрипт, который менял бы ее содержимое при первом клике на "Close" и открывал div. А при повторном нажатии содержимое бы стало прежним и div исчез.

Comments

[Алексей Уколов]

Покажите свой скрипт, расскажите что с ним не так. Иначе, это не вопрос, а задание.

[Саша]

Алексей Уколов: Не простая задача, менять содержимое двух классов, по сравнению с подменой класса. Это не задание, а основа которую надо знать каждому разработчику.
Как вы хорошо знаете js ? Просто я год не писал, был в армии, вот интересует что нового появилось.
Можете оба посмотрите мой вариант)

[Алексей Уколов]

Саша: вот именно, это основа, которую должны знать все. И если автор вопроса этого не знает, то ему надо книги читать, а не просить, чтобы здесь за него все сделали.

[Саша]

Алексей Уколов: Да ладно вам, сложно нам потратить 10 сек, что бы написать пару строчек.
Понимаю если бы он попросил, а не сверстаете вы мне магазин... Вот тогда да, послать бы его по дальше. А так если он хочет верстать, то по любому надо учить js. Если он сам правит что-то, то наткнется на что-то плохое и тогда у него только одна дорога - фриланс, где он потратит кучу денег.

[Алексей Уколов]

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

[Саша]

Алексей Уколов: В этом вы наверное правы.

Answer 1

[Дмитрий Маринин]

Способов масса. Вот один из:

HTML:

<button class="js-button" data-toggle-text="Close">Open</button>
<div class="js-container hidden">
Some text here.
</div>

CSS:

.hidden {
  display: none;
}

Если вы не используете jQuery в проекте, то посмотрите пример на чистом JavaScript:

JavaScript: (Демо: codepen.io/anon/pen/EjzYpy )

;(function($D){
    var $button    = $D.querySelector('.js-button'),
        $container = $D.querySelector('.js-container');
  
    $button.addEventListener('click', function(e){
      var data = e.target.dataset,
          toggleText = $button.innerHTML,
          isVisible = $container.style.display == 'block';
      
      $button.innerHTML = data.toggleText;
      data.toggleText = toggleText;
      
      $container.style.display = isVisible ? 'none' : 'block';
    });
})(document);

Если используете jQuery, посмотрите следующий пример:

jQuery: (Демо: codepen.io/anon/pen/MwdgEN )

$(function(){
  var $button    = $('.js-button'),
      $container = $('.js-container');
  
  $button.on('click', function(){
    var toggleText = $(this).data('toggle-text');
    
    $(this).data('toggle-text', $(this).text())
           .text(toggleText);
    
    $container.toggleClass('hidden');
  });
});

Comments

[Саша]

jQuery - зло, ради одной функции.
Если jQuery используется для множества, то хорошо.
Это кстати какой-то извращенный вариант, может было обойтись двумя строчками)

[Дмитрий Маринин]

Саша: в тегах есть jQuery, поэтому я привел такой пример. Правильно ли я понимаю, у вас мало опыта и поэтому вы, во первых, не правильно поняли задачу, а во вторых рекомендуете использовать селекторы типа $('div') и не кэшировать их?

[Саша]

Дмитрий Маринин: Ахаха, нет. Я просто посоветовал лучший вариант. Зачем грузить целую библиотеку ради "меньше" 1кб кода?
Кэш, тут спорный вопрос, нужен он или нет. Если данные будут меняться, то это - а так вы правы. Но лучше по другому кэшировать.
По мне в такой ситуации лучше не кэшировать.
Опыт, около 4х лет.

[Дмитрий Маринин]

Саша: не знаю, чем вы занимались в течении этих 4-х лет. Добавил для вас пример на чистом JavaScript.

[Саша]

Дмитрий Маринин: демо не работает на чистом js

[Дмитрий Маринин]

Саша: по ссылке ревизия старая была. Обновил.

[Саша]

Дмитрий Маринин: Я написал что бы изм.
Да честно там еще сотни способов как можно, а как лучше, вопрос относительный.
Можно обрабатывать по событию или функции итд.

[Саша]

я бы автору вопроса посоветовал пойти на этот сайт и поучить js.
https://learn.javascript.ru/ отличный сайт.

[Саша]

Думаю что многие поддержат меня

[Дмитрий Маринин]

Саша: "обрабатывать по событию или функции итд." — ... what?

[Дмитрий Маринин]

Саша: вам самим не помешает поучить JavaScript...

[Саша]

Дмитрий Маринин: Если вы меня не поняли, это не значит что я не знаю js.
В след. раз сразу код кину.

[Алексей Уколов]

Дмитрий Маринин: два замечания:
1. Не стоит усложнять код замыканиями и модулями - вы же видите уровень автора, первым делом он начнет спрашивать зачем точка с запятой в самом начале.
2. Кэшировать $button большого смысла нет - она используется только при навешивании обработчика (а внутри обработчика можно заменить на this).

[Odinokun]

Дмитрий Маринин В случае если у нас будет много блоков с кнопками, они будут открываться/закрываться все одновременно.
А как сделать, что бы выбирался именно тот .js-container который идет после кнопки? (jQuery)
ЗЫ а можно как-то замедлить скрытие блока?

[Odinokun]

ага, с выбором конкретного контейнера я разобрался.
$(this).siblings('.js_container').toggleClass('hidden');

может подскажете как добавить медленное раскрытие/закрытие бока?

[Дмитрий Маринин]

Дмитрий: если нужно реализовать задачу, где блоков много — решение будет немного другим.

По поводу медленного раскрытия/закрытия: по клику добавляйте/убирайте класс на нужном элементе. В CSS для этого класса используя свойство transition, анимируйте свойство max-height (от 0 к фиксированному значению, и наоборот. Не забудьте про overflow-y: hidden).

Answer 2

[Владлен Грачев]

Если в содержимом "Open", развернуть DIV и изменить содержимое на "Close". Иначе свернуть DIV и изменить содержимое на "Open".

В термины JS/jQuery сами перевести сможете, надеюсь?

Comments

[Михаил Губер]

Нет, с этим у меня проблема.

Answer 3

[Саша]

Пример jQuery . Пример JS
Вот это прочитать.

Мой вариант на js.
css:

.Open{
    background:#508;
}
.Close{
    background:#fd3;
}

html:
<div id='click'>click</div>

js:

t = document.getElementById('click')
t.onclick = function(){
    this.className = (this.className == 'Open')?' Close':'Open'
}
document.onclick = function(e){
    if(e.target.id != 'click'){
        t.className = ' Open'
    }
}

Прокомментируйте, какой код лучше, тот что "пример js" или которой я выложил.
Меня интересует ваше мнение.

Comments

[Алексей Уколов]

1. Не стоит навешивать обработчики через onclick, лучше использовать addEventListener, мы, все-таки, не в 2001 году живем.
2. var t.
3. Из-за странных пробелов в начале класса код не будет работать так, как ожидается.
4. Код не рассчитан на то, что у элемента могут быть и другие классы.
5. Названия классов с большой буквы - фу.
6. Непонятно зачем вообще ставить обработчик на document, в вопросе об этом ничего не сказано.

В целом, подход к снаряду не засчитан.

[Саша]

Алексей Уколов:
1.Спасть хотел, забыл.
2.сократил.
3.Случайность, сон важен, кстати спасибо.
4.там было дано только 2 класса, а так да
5.привычка иногда срабатывает
6.пускай будет.

Ну и ладно, я не обиделся)

[Саша]

Это разминка была

[Саша]

Ну и если я не ошибаюсь с addEventListener есть проблемки, поэтому не вспомнил

[Алексей Уколов]

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

[Саша]

Алексей Уколов: за качество надо платить, тогда и ооп и оптимизация будет

[Саша]

а с ооп хоть 1000000 классов

[Саша]

хотя я с вами не соглашусь. Этот код может не много старый, но он будет работать везде.
У меня на айфоне addEventListener не всегда срабатывает, только что протестил, через раз. ios9

[Алексей Уколов]

Во-первых, ни одно из моих замечаний не имеет отношения к ООП, я прокомментировал ваш конкретный код.
А во-вторых, по поводу addEventListener - у меня очень большие сомнения, что функция, которую используют 99% сайтов не работает, и при этом об этом нет ни слова в поисковиках.
Вероятно, вы где-то что-то не так написали ради "оптимизации" или "со сна", уж не обессудьте, я скорее в это поверю.
Кстати, про 2001 год я погорячился - addEventListener был предложен в 2000 году.

[Саша]

Не, я примеры юзал.
Я не про свой код. У меня простой набросок.
Забили =)

Может ось сырая, может примеры кривые, хз.