jQuery: FadeOut, не работающий со строками таблицы
Способ использования jquery из npm:
В app.js
app.use('/assets', [
express.static(__dirname + '/node_modules/jquery/dist/'),
express.static(__dirname + '/node_modules/materialize-css/dist/'),
...
]);
В шаблоне макета:
<script src="/assets/jquery.min.js"></script>
<script src="/assets/js/materialize.min.js"></script>
надеюсь, что этот код поможет вам!
3 ответа
В jQuery есть проблема при скрытии trs . Это текущий обходной путь, пока они не сделают что-то подобное в ядре, если захотят.
row.find("td").fadeOut(1000, function(){ $(this).parent().remove();});
Это в основном скрывает tds в строке, а не фактическую строку. Затем он удаляет строку из DOM. Я считаю, что он работает во всех браузерах. Но при необходимости вы можете настроить таргетинг на IE.
Эти две вещи различаются:
- Скрытие строки с помощью hide (), fadeOut (), slideUp (), применение класса, установка значения CSS или с помощью анимация; и
- удаление элемента из DOM.
Если я правильно прочитал, что вы говорите, вы хотите сделать и то, и другое. Если да, попробуйте следующее:
function deleteItem(modelId,itemindexId, rowId) {
$.get("RemoveFromCart.aspx", {
model: modelId,
cartItem: itemindexId,
mode: "removefromcart",
rand:Math.random()
}, function(data) {
var row=$("#"+rowId);
row.fadeOut(1000, function() {
row.remove();
});
});
};
В основном это говорит:
- ПОЛУЧИТЬ RemoveCart.aspx на сервере с заданными параметрами;
- Когда эта функция вернется, начните постепенное исчезновение строки в течение одной секунды;
- Когда этот fadeOut будет завершен, удалите его из DOM.
Хотя решение Jab - это способ решить проблему, оно все же содержит ошибку. В частности, ваша функция обратного вызова для удаления родительского элемента будет запускаться один раз для каждого элемента 'td' в этой строке, тогда как на самом деле она должна запускаться только один раз для последнего. Это можно продемонстрировать, поместив вызов предупреждения в обратный вызов, который будет отображаться один раз для каждого td в строке.
Мне еще предстоит найти действительно аккуратный способ обойти это, но в итоге я получил что-то вроде этого :
function ShowHideTableRow(rowSelector, show, callback)
{
var childCellsSelector = $(rowSelector).children("td");
var ubound = childCellsSelector.length - 1;
var lastCallback = null;
childCellsSelector.each(function(i)
{
// Only execute the callback on the last element.
if (ubound == i)
lastCallback = callback
if (show)
{
$(this).fadeIn("slow", lastCallback)
}
else
{
$(this).fadeOut("slow", lastCallback)
}
});
}
Чтобы вызвать это, вы должны использовать что-то вроде этого:
ShowHideTableRow("#MyTableRowId",false,function() { // do something else ONCE when the row is hidden or shown... });
ПРИМЕЧАНИЕ: Моя версия не удаляет строку из dom, потому что я просто хочу скрыть / показать ее, но это должно быть довольно легко адаптировать.