На странице имеются блоки с одинаковыми 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>
. Но "ничего пока не получается".
$('#block').each(function() {
бесполезна. Для чего она присутствует в коде? Кстати, создание нескольких элементов с одинаковым ID считается дурным тоном, и не просто так..each
не работает клик более чем на один блок.$('.bc').click
добавляет обработчик событияclick
всем элементам с классомbc
. А$('#block').each(function() {
делает ровно одну итерацию (если, конечно, элемент с IDblock
присутствует на странице. Если его нет - тогда ноль итераций).id
должны быть уникальными.