Question

我想在jQuery中使用show()和hide()。我已经开发了一些你可以看到的东西：

我的代码的混乱部分是当我点击Click to Apply coupon code时，当我点击Apply !然后Apply !将会继续时，输入会显示文字Apply !单击此处X将会出现Click to Apply coupon code将会出现Apply !仅显示现在混淆的第一个阶段，当我再次点击它时，输入将会出现{{1}不会来的。

基本上我希望它一次又一次地运行。请检查我的代码。

Answer 1

点击applyCoupn按钮后，容器span被隐藏，而不是applyCoupn元素，但在addCoupon按钮中，您正在显示applyCoupn元素

尝试

$('.addCoupon').click(function(){
    $(this).parent('span').siblings('div.coupon').fadeIn(500);
    $(this).hide();

    $(this).parent('span').siblings('div.coupon').find('.applyCoupn').show();
    $(this).parent('span').siblings('div.coupon').find('.cancelCoupn').hide();      
})

$('.applyCoupn').click(function(){
    $(this).hide();
    $(this).parent('span').next('span').find('.cancelCoupn').show();
})

$('.cancelCoupn').click(function(){         
    $(this).parent('span').parent('div.coupon').slideUp(300);
    $(this).hide();
    $(this).parent('span').parent('div.coupon').siblings('span').children('.addCoupon').show();     
})

演示：Fiddle

更好的解决方案是

<div class="coupon">
    <input type="text" name=" " />
    <span class="small applyCoupn"><a href="#">Apply !</a></span> 
    <span class="small cancelCoupn"><a href="#">X</a></span>
</div>
<span class="small addCoupon"><a href="#">Click to Apply coupon code</a></span>

然后

$('.addCoupon').click(function(){
    var $this = $(this), $coupon = $this.siblings('div.coupon');

    $coupon.fadeIn(500);
    $this.hide();

    $coupon.find('.applyCoupn').show();
    $coupon.find('.cancelCoupn').hide();        
})

$('.applyCoupn').click(function(){
    var $this = $(this)

    $this.hide();
    $this.next('span.cancelCoupn').show();
})

$('.cancelCoupn').click(function(){
    var $this = $(this), $coupon = $this.closest('div.coupon');
    $coupon.slideUp(300);
    $this.hide();
    $coupon.siblings('span.addCoupon').show();      
})

演示：Fiddle

Answer 2

您的“点击申请优惠券代码”应该创建一个新元素并附加到它们所在的div的开头。每次都应该有一个新的id，所以当你POST时你没有收到错误的值。您可以通过执行以下操作将新附加到开头：

var newBox = '';
var _init = jQuery('#div').html;
jQuery('#div').html(newBox + _init);

使用jQuery show（）hide（）元素

2 个答案: