0

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

小提琴：http: //jsfiddle.net/xMk2S/

我的代码中令人困惑的部分是当我点击时，当我点击时Click to Apply coupon code会出现一个带有文本的输入，然后Apply !点击它就会出现在它的位置上，它会带你进入第一阶段，现在只会显示困惑是当我再次点击它然后输入会来但不会来。Apply !Apply !XClick to Apply coupon codeApply !

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

4

2 回答 2

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

演示：小提琴

更好的解决方案将是

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

演示：小提琴

于 2013-09-18T10:46:17.547 回答
0

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

var newBox = '';
var _init = jQuery('#div').html;
jQuery('#div').html(newBox + _init);
于 2013-09-18T10:47:22.320 回答