Что добавить в скрипт чтобы работало несколько кнопок?

Question

[partyzanx]

<script>
var mem = (function() {
 try {
 return 'localStorage' in window && window['localStorage'] !== null ? localStorage : false
 } catch(e) {
 
 }
}());
 
$(function() {
 var _hlp_bx = $('.explanation'), _hlp_bt = $('#explanation-btn').click(function(e, d) {
 if(mem) {
 if(mem['help'] && !d) {
 mem.removeItem('help');
 _hlp_bx.removeClass('hide8');
 _hlp_bt.text(_hlp_bt.data('mess')[1])
 
 } else {
 mem.setItem('help', 1);
 _hlp_bx.addClass('hide8');
 _hlp_bt.text(_hlp_bt.data('mess')[0])
 }
 } else {
 //управление через куки
 } 
 });
 
 if(mem && mem['help']) _hlp_bt.trigger('click', [1]);
 
});
</script>

<button id="explanation-btn" data-mess='["✖ explanation hidden","✓ explanation shown"]'>✓ explanation shown</button>

<span class="explanation">объяснение к примеру</span>

.explanation.hide8 {
 
 display: none!important;
 
}

Есть такой скрипт, при нажатии на button отключает/включает класс explanation с запоминанием в куки. Что прописать, чтобы можно было вписать ещё 20 кнопок отключающие/включающие каждый свой определённый отдельный класс?

Просто копировать скрипт и менять там классы кнопок и скрываемых классов приведёт к тому, что при скрытии одного класса, скроются все остальные при следующей перезагрузке страницы. А при включении одного класса, включатся все другие при следующей перезагрузке страницы.

Answer 1

[Дмитрий C]

$(function() {
var _hlp_bx = $('.explanation');
Изменить на класс, так как id должны быть уникальные
$('.explanation-btn').click(function(e, d) {
var _hlp_bt = $(this)
if(mem) {
....
....
})
}

Comments

[partyzanx]

на странице всего одна кнопка #explanation-btn, поэтому айди стоит

[partyzanx]

wikihsk.com/publ/chinese-grammar/hsk-3-intermediat... вот пример страницы.
А как подключить другие кнопки для других классов? Например, чтобы #characters-btn откл/вкл .chinese .word, .chinese .sentence, .liju .chinese

[Дмитрий C]

Наверное я не совсем понял.
Возможно так:
https://jsfiddle.net/dg3xxyy9/

[partyzanx]

Дмитрий C, надо чтобы все классы были изначально отображены. В данном примере они скрыты.
При включении одного класса выключается другой, так не надо, должно быть независимо друг от друга.
И чтобы выбор пользователя запоминался в кукисы.

[Дмитрий C]

https://jsfiddle.net/dg3xxyy9/1/

[partyzanx]

Дмитрий C, теперь последний штрих, когда класс выключен, то на кнопке меняется название на
✖ explanation hidden , а когда включен ✓ explanation shown

[Дмитрий C]

https://jsfiddle.net/dg3xxyy9/2/

[partyzanx]

Дмитрий C, почему-то не записывается в куки, помогите, пожалуйста. Вот я сюда выложил последний код

[Дмитрий C]

Пример с куками, при обновлении, скрываем, которые до этого скрыли:
https://jsfiddle.net/dg3xxyy9/3/
Для работы с куками подключен:
https://github.com/js-cookie/js-cookie

[partyzanx]

Дмитрий C, я так понял надо это прописать в шапке?

<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>

[Дмитрий C]

Да.

[partyzanx]

Дмитрий C, я прописал, но что-то не пашет )))

[Дмитрий C]

Посмотрите в консоли, возможно есть какие то другие ошибки, до этого.
Я привел как пример, что работает, вы можете использовать свой функционал, для работы с куками.

[partyzanx]

Дмитрий C, тогда помогите, пожалуйста, не куки а localstorage подключить