slideUp()/slideDown() 无法正常工作

Question

我在编写以下代码时遇到问题。在我看来，我为每张信用卡动态创建了一个“li”元素列表。每个 li 项都包含一个删除按钮，单击该按钮时，会为 li 项添加属性“display:block”，然后触发向下滑动效果。然后我想向上滑动名为“removethis”的 div 以显示消息“你确定要删除，有 YES，NO 选项”

我的问题是，每次单击删除按钮时，效果总是发生在第一个 li 项目上，而不是我选择删除的 li 项目上。我不确定如何在 jquery 中正确编码。我尝试过遍历但没有到达任何地方。

 @if (Model.Cards != null && Model.Cards.Count > 0)
{
    <h2>Your linked cards</h2>

<ol class="payu_creditcard_list">
        @foreach (var card in Model.Cards)
        {
            var subLogoClass = string.Empty;
            switch (card.fields.information)
            {
                case "Master Card":
                    subLogoClass = "mastercard";
                    break;
                case "Visa":
                    subLogoClass = "visa";
                    break;
                case "American Express":
                    subLogoClass = "amex";
                    break;
                case "Diners Club":
                    subLogoClass = "dinersclub";
                    break;
                case "Samba":
                    subLogoClass = "samba";
                    break;
                case "b-Smart":
                    subLogoClass = "bsmart";
                    break;
            }

            <li>
                <div id="creditCardDetails">
                    <a class="payu_creditcard_remove" href="#">Remove</a>
                    <div class="payu_creditcard_logo  @subLogoClass">@card.fields.information</div>
                    <div class="payu_creditcard_number">@card.fields.card_number</div>
                    <div class="payu_creditcard_expiry"><span class="payu_accompanying_text">Expires: </span><span class="payu_creditcard_expirydate">@(string.Format("{0}/{1}", card.fields.card_expiry.Substring(0, 2), card.fields.card_expiry.Substring(4)))</span></div>
                    <br>
                    <div class="payu_creditcard_description">@card.fields.description</div>
                </div>

                <div id="confirmDelete" style="display: none">
                    <div class="confirm_message">Are you sure?</div>
                    <div class="confirm_buttons">
                        <button class="btn btn-submit btn-full">Yes</button>
                        <a href="#">No</a>
                    </div>
                </div>
            </li>
    }
</ol>
}

这是我的 JS：

    $(".payu_creditcard_remove").click(function () {
    $("#confirmDelete").attr("display", "block");
    $("#confirmDelete").slideDown("500");
    $("#creditCardDetails").slideUp("500");
});

更新

我最终使用了以下，但它仍然不完美，当我选择一个 li 项目时，所有 div 似乎都在轻微移动。

$(".payu_creditcard_remove").click(function (e) {
e.preventDefault();

$("ol.payu_creditcard_list li").find("#confirmDelete").slideUp("1500");
$("ol.payu_creditcard_list li").find("#creditCardDetails").slideDown("1500");

$(this).parent().next().show();
$(this).parent().slideUp("1500");
$(this).parent().next().slideDown("1500");

});

Answer 1

你可以试试这个：

$(".payu_creditcard_remove").click(function () {
    $(".shown").hide();
    $(this).parent().next().addClass("shown").show();
    $(this).parent().next().slideDown("500");
    $(this).parent().slideUp("500");
});