Переключение между двумя изображениями и двумя предложениями

Question

Я создаю кнопку добавления и удаления, когда вы можете добавить выше картинки, которую она написала, пожалуйста, добавьте, и когда вы можете удалить ее, пожалуйста, удалите. Однако я застрял в том, как заставить его работать. Что я получил работу, когда вы добавляете, но не при удалении:

$('.button a').click(function() { 
     var url = $(this).attr('href'); 
     var info = $(this).attr('rel'); 
     var cct = $.cookie("<?php echo $this->config->item('csrf_cookie_name'); ?>"); 

     $.get(url, {<?php echo $this->security->get_csrf_token_name(); ?>: cct}, function() { 
      $('.button a').empty().addClass('delete'); 
      $('.addText').empty().html(info); 
     }); 
     return false; 
    }); 

HTML-

<div class="addText">please add</div> 

<div class="button"><a href="cabinet/add/180" class="add" rel="please delete"></a></div> 

Answer 1

Поскольку вы принимаете текст из атрибута Линка rel, вам нужно изменить rel к тому, что вы хотите сказать, следующий:

// Add to Cabinet 
$('.button a').click(function() { 
    var url = $(this).attr('href'); 
    var info = $(this).attr('rel'); 
    var cct = $.cookie("<?php echo $this->config->item('csrf_cookie_name'); ?>"); 

    $.get(url, {<?php echo $this->security->get_csrf_token_name(); ?>: cct}, function() { 
     $('.button a').empty().addClass('delete'); 
     $('.button a').attr('rel', $('.addText').html()); // Change the rel text 
     $('.addText').empty().html(info); 
    }); 
    return false; 
}); 

Как в сторону: никогда позволяют GET запросов для удаления данных, используйте вместо POST: https://stackoverflow.com/a/1744404/539097

Вы также можете использовать toggleClass вместо addClass чередовать между добавлением и удалением класса «удалить» на вашем элементе связи.