slideUp()/slideDown() не работает правильно

Question

У меня возникла проблема с кодированием следующего. На мой взгляд, я динамически создаю список элементов «li» для каждой кредитной карты. Каждый элемент li содержит кнопку удаления, которая при нажатии добавляет атрибут «display: block» к элементу li, а затем вызывает эффект скольжения. Затем я хочу, чтобы divup div, называемый «removeethis», чтобы показать сообщение «Вы уверены, что хотите удалить, с YES, NO options»

Моя проблема в том, что каждый раз, когда я нажимаю кнопку «Удалить», эффект всегда возникает на самом первый элемент 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"); 
}); 

UPDATE

Я закончил с использованием следующего, но его еще не совершен, когда я выбираю элемент LI , все divs, кажется, немного двигаются.

$(".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"); 
});