Question

我在编写以下内容时遇到问题。在我看来，我动态创建了一个＆＃34; li＆＃34;每张信用卡的元素。每个li项都包含一个删除按钮，单击该按钮时，会添加属性＆＃34; display：block＆＃34;到li项目然后触发滑动效果。然后我想滑动div，叫做＃34;删除这个＆＃34;显示消息＆＃34;您确定要删除，是，没有选项＆＃34;

我的问题是，每当我点击删除按钮时，效果总是出现在第一个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");
});

slideUp（）/ slideDown（）无法正常工作

1 个答案: