如何通过jquery解决隐藏和可见问题

Question

我正在尝试制作一个场景。在每一行，有两个按钮（一个是“添加我”，另一个是：“修改我”）和一个文本链接（“选择”）。我想要那个，默认情况下，“添加我”按钮是隐藏的。如果有人单击“选择”，则“选择”应更改为“取消选择”，“修改我”按钮应消失，“添加我”按钮应可见。如果有人点击“取消选择”，则应该发生相反的事件。

我已将“选择”文本设置为“取消选择”。但是，“添加我”按钮还没有出现。除此之外，从“取消选择”更改为“选择”并显示“修改我”按钮而不是“添加我”按钮不起作用。

这是我的作品：http://jsfiddle.net/learner73/hyNT3/

$(".selected").click(function(){

  $(this).removeClass('selected').addClass('deselected').text('Deselct');
    $(this).next(".addBtn").css("visibility", "visible");
    $(this).next(".modifyBtn").hide();
});

$(".deselected").click(function(){

                    $(this).find('deselected').removeClass('deselected').addClass('selected').text('Select');
    $(this).next(".addBtn").hide();
    $(this).next(".modifyBtn").show();
});

Answer 1

$(".addbtn").hide();
$(document).on('click', '.right', function(e) {
    $(this).text($(this).text() == 'Select' ? 'Deselect' : 'Select');
    $(this).parent().find('.addbtn, .modifyBtn').toggle();
});

这里：http://jsfiddle.net/hyNT3/1/