0

На странице имеются блоки с одинаковыми id, class и с data-block, в котором разное содержание. Блоки генерируются с помощью PHP.

Я реализовал (насколько хватило знаний) добавление информации с data-block в поле <textarea> по клику на блок и добавление класса selected, чтобы показать, что на блок уже кликнули.

$('.bc').click(function() {
    $(this).addClass('selected');
});
$('#block').each(function() {
    $('.bc').click(function() {
        if ($('textarea.textarea').append($(this).data('block') + '\n')) { }
    });
});
#block {
    background-color: #77bee2;
    padding: 4px;
    margin: 0 0 10px;
    width: 150px;
    border: 2px #3fa3d6 solid;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
}
.selected {
    opacity: 0.5;
}
<div id="block" class="bc" data-block="Текст при клике">Просто нажми меня...</div>
<div id="block" class="bc" data-block="Ку, ку">А вот и я...</div>
<div>
    <textarea wrap="hard" rows="5" cols="20" class="textarea"></textarea>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Со следующим шагом у меня возникли проблемы. Дальше я хочу сделать, чтобы при повторном клике на уже отмеченный блок не добавлялась повторно информация с data-block, а наоборот - удалялся класс selected и удалялась запись этого блока с <textarea>. Но "ничего пока не получается".

Пример в fiddle

5
  • Строка $('#block').each(function() { бесполезна. Для чего она присутствует в коде? Кстати, создание нескольких элементов с одинаковым ID считается дурным тоном, и не просто так.
    – Regent
    19 окт 2015 в 13:04
  • Без .each не работает клик более чем на один блок.
    – excellproj
    19 окт 2015 в 13:07
  • $('.bc').click добавляет обработчик события click всем элементам с классом bc. А $('#block').each(function() { делает ровно одну итерацию (если, конечно, элемент с ID block присутствует на странице. Если его нет - тогда ноль итераций).
    – Regent
    19 окт 2015 в 13:09
  • 1
    @excellproj, на всякий случай отмечу, что согласно спецификации HTML значения аттрибута id должны быть уникальными. 19 окт 2015 в 13:10
  • @Dmitriy Simushev, согласен. Перепишу. Спасибо за ценное замечание.
    – excellproj
    19 окт 2015 в 13:15

2 ответа 2

1

Вы можете сделать проверку на наличие класса selected у элемента, по которому кликнули, а дальше, в зависимости от логики приложения, производить какие-то действия с элементом. Например так:

var $tx = $('textarea.textarea');
$('.bc').click(function() {
    var $el = $(this),
        str = $el.data('block') + '\n';

    if ($el.hasClass('selected')) {
        // Блок УЖЕ имеет класс "selected"
        $el.removeClass('selected');
        $tx.val($tx.val().replace(str, ''));
    } else {
        // Блок ЕЩЕ НЕ имеет класс "selected"
        $el.addClass('selected');
        $tx.val($tx.val() + str);
    }
});
3
  • @Regent, так суть вопроса не только в переключении классов, но и в выполнении других действий. Если бы все сводилось к переключению классов, то да, toggleClass было бы оптимальным решением 19 окт 2015 в 13:13
  • @Regent, добавил работу с <textarea> 19 окт 2015 в 13:25
  • Хотел, было, опять заикнуться про .append() вместо .val(), но .val() действительно более правильный подход.
    – Regent
    19 окт 2015 в 13:29
0

Немного поправил ваш код. Теперь он делает, что вы хотите:

$('.bc').click(function(){
   if ($(this).hasClass('selected')) {
       $('textarea.textarea').val($('textarea.textarea').val() .replace($(this).data('block') + '\n',''));
       $(this).removeClass('selected');
    } else {
        $('textarea.textarea').val($('textarea.textarea').val() + $(this).data('block') + '\n');
        $(this).addClass('selected');
    }
});

http://jsfiddle.net/2hsdj4nx/

Что этот код делает:

$(this).hasClass('selected'); Проверяет, если ли у элемента уже класс selected, т.е. нажимали мы на него или еще нет.

Если нет то(т.е. еще не нажимали):

$('textarea.textarea').val($('textarea.textarea').val() + $(this).data('block') + '\n'); Добавляем в textarea текст из дата атрибута block. Вы это уже делали

$(this).addClass('selected'); Добавляем класс selected. Что бы изменить UI, и потом понимать что мы уже нажимали на этот элемента.

Если да то(т.е. уже нажимание):

$('textarea.textarea').val($('textarea.textarea').val() .replace($(this).data('block') + '\n','')); Удаляем первое включение текста.

$(this).removeClass('selected'); Удаляем класс selected. Что бы изменить UI, и потом понимать что мы еще не нажимали на этот элемента.

4
  • Вызывать $(this) в каждом обработчике события трижды - это расточительно. К тому же, я не совсем понимаю, чем ваш ответ принципиально отличается от моего ;) 19 окт 2015 в 13:21
  • @DmitriySimushev тем что я ответил на вопрос раньше, что вы там наредактировали я не проверял. Если считаете что ответ не правильно или вредный, думаю вы знаете как выразить это.
    – Vartlok
    19 окт 2015 в 13:27
  • @Vartlok, вы правы. Минус за расточительное использование $(...) 19 окт 2015 в 13:29
  • @Vartlok спасибо за Ваш ответ и описание,
    – excellproj
    19 окт 2015 в 13:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.