У меня есть таблица данных, состоящая из 3 столбцов. В третьем столбце находится кнопка для клика, которая должна добавлять данные во внешний div с идентификатором routeList из первого p во втором столбце. Вот мой html. Кроме того, я добавил событие щелчка, чтобы изменить класс кнопки и изменить текст кнопки.
.html
<tr>
<td class="col1"><img src="http://placehold.it/200x200" alt="..." class="img-responsive tableImage"></td>
<td class="col2">
<p class="address">
<i class="fa fa-home fa-lg"></i> Address
</p>
<p>
<i class="fa fa-calendar fa-lg"></i> Dates
</p>
<p>
<i class="fa fa-map-marker fa-lg"></i> Distance
</p>
</td>
<td class="col3">
<button type="button" class="btn btn-sm routeAdd btn-success" data-toggle="addToRoute"><i class="fa fa-check"></i> Added</button>
</td>
</tr>
.js
$('[data-toggle=addToRoute]').click(function() {
if($(this).children().hasClass('fa-plus')) {
$(this).removeClass('btn-custom').addClass('btn-success').empty().html('<i class="fa fa-check"></i> Added');
} else {
$(this).removeClass('btn-success').addClass('btn-custom').empty().html('<i class="fa fa-plus"></i> Add');
}
});
Я пытался добавить это в первый раздел оператора if
$(this).closest('p.address').appendTo('#routeList');
Я думаю, что мне не хватает чего-то простого. Также на обратной стороне инструкции else p следует удалить, если нажать кнопку. Я не правильно выбираю элемент. Или я нападаю на это совершенно неправильно.
Пытаться
$(this).closest('tr').find('p.address').appendTo('#routeList');
Найдите p.address
в ближайшем tr
.
$('#routeList').empty();
удалить все содержимое или $('#routeList').find('p.address').remove();