使用jQuery和css隐藏/显示选定的表单 [英] hide/show selected form with jQuery and css

问题描述

这里是我的代码，你会更好地理解。

我尝试创建一个jQuery函数隐藏/显示基于用户的选择的表单。 >

  ... 
< p id =joinChoiceclass =parent> 
< a href =id =mastercardChoicedata-form-id =mastercardForm>< span class =overlay>< / span>< / a> 
< a href =id =visaChoicedata-form-id =visaForm>< span class =overlay>< / span>< / a> 
< a href =id =discoverChoicedata-form-id =discoverForm>< span class =overlay>< / span>< / a> 
< / p> 
 ... 
 
 
< div class =joinForm> 
< div id =noneForm>< / div> 
< div id =mastercardForm>< / div> 
< div id =visaForm>< / div> 
< div id =discoverForm>< / div> 
< / div> 
  

我的CSS代码：

  .joinForm {width：55％;位置：相对; height：396px;} 
 
 #noneForm {
 background：url（../ img / ccard-none.jpg）no-repeat scroll 0 0 #FFF; 
 height：396px; 
 width：616px; 
 position：absolute; 
 top：0; 
 display：block; 
} 
 
 #mastercardForm {
 background：url（../ img / mastercard-form.jpg）no-repeat scroll 0 0 #FFF; 
 height：396px; 
 width：616px; 
 position：absolute; 
 top：0; 
 display：none; 
} 
 
 #visaForm {
 background：url（../ img / visa-form.jpg）no-repeat scroll 0 0 #FFF; 
 height：396px; 
 width：616px; 
 position：absolute; 
 top：0; 
 display：none; 
} 
 
 #discoverForm {
 background：url（../ img / discover-form.jpg）no-repeat scroll 0 0 #FFF; 
 height：396px; 
 width：616px; 
 position：absolute; 
 top：0; 
 display：none; 
} 
  

和jQuery代码（@ 8y5）

  $（'＃joinChoice a'）。click（function（e）{
 
 e.preventDefault（）; 
 
 var $ this = $（this）; 
 var i = 0; 
 
 //重置其他
 var $ links = $ this.siblings b $ b $ links.removeClass（'on'）; 
 $ links.each（function（linkEl）{
 $（'＃'+ $（linkEl）.data（'form-id'） ）.hide（）; 
}）; 
 
 //激活用户选择.. 
 $ this.addClass（'on'）
 $（'＃' + $ this.data（'form-id'））。show（）; 
 
}）; 
  

解决方案

尝试此

  $（'＃joinChoice a'）。click（function（e）{
 
 e.preventDefault（）; 
 
 var $ this = $（this）; 
 var i = 0; 
 
 //重置其他
 var $ links = $ this.siblings b $ b $ links.removeClass（'on'）; 
 $ links.each（function（linkEl）{
 $（'＃'+ $（linkEl）.data（'form-id'） ）.hide（）; 
}）; 
 
 //激活用户选择.. 
 $ this.addClass（'on'）
 $（'＃' + $ this.data（'form-id'））。show（）。siblings（）。hide（）; 
 
}）; 
  

小提琴

或

  $ '#joinChoice a'）。click（function（e）{
 e.preventDefault（）; 
 var $ this = $（this）; 
 $（this）.addClass 'siblings（）。removeClass（'on'）
 $（'＃'+ $ this.data（'form-id'））。 
 $ b}）; 
  

小提琴

i try to make an jQuery function for hide/show a form based on the user's choice!

Here is my code that you will understand better.

…               
<p id="joinChoice" class="parent">
    <a href="" id="mastercardChoice" data-form-id="mastercardForm"><span class="overlay"></span></a>
    <a href="" id="visaChoice" data-form-id="visaForm"><span class="overlay"></span></a>
    <a href="" id="discoverChoice" data-form-id="discoverForm"><span class="overlay"></span></a>
</p>
…


    <div class="joinForm">
        <div id="noneForm"></div>
        <div id="mastercardForm"></div>
        <div id="visaForm"></div>
        <div id="discoverForm"></div>
    </div>

My CSS Code :

.joinForm { width: 55%; position: relative; height: 396px;}

#noneForm {
    background: url("../img/ccard-none.jpg") no-repeat scroll 0 0 #FFF;
    height:396px;
    width:616px;
    position: absolute;
    top: 0;
    display: block;
}

#mastercardForm {
    background: url("../img/mastercard-form.jpg") no-repeat scroll 0 0 #FFF;
    height:396px;
    width:616px;
    position: absolute;
    top: 0;
    display: none;
}

#visaForm {
    background: url("../img/visa-form.jpg") no-repeat scroll 0 0 #FFF;
    height:396px;
    width:616px;
    position: absolute;
    top: 0;
    display: none;
}

#discoverForm {
    background: url("../img/discover-form.jpg") no-repeat scroll 0 0 #FFF;
    height:396px;
    width:616px;
    position: absolute;
    top: 0;
    display: none;
}

And jQuery code (by @8y5 )

$('#joinChoice a').click(function (e) {

        e.preventDefault();

    var $this = $(this);
    var i = 0;

    // Reset others
    var $links = $this.siblings();
    $links.removeClass('on');
    $links.each(function(linkEl) {
      $( '#'+$(linkEl).data('form-id') ).hide();
    });

    // Activate user choice..
    $this.addClass('on')
    $('#'+$this.data('form-id')).show();

}); 

解决方案

Try with this

$('#joinChoice a').click(function (e) {

        e.preventDefault();

    var $this = $(this);
    var i = 0;

    // Reset others
    var $links = $this.siblings();
    $links.removeClass('on');
    $links.each(function(linkEl) {
      $( '#'+$(linkEl).data('form-id') ).hide();
    });

    // Activate user choice..
    $this.addClass('on')
    $('#'+$this.data('form-id')).show().siblings().hide();

}); 

Fiddle

OR

$('#joinChoice a').click(function (e) {
    e.preventDefault();
    var $this = $(this);
    $(this).addClass('on').siblings().removeClass('on')
    $('#'+$this.data('form-id')).show().siblings().hide();

}); 

Fiddle

这篇关于使用jQuery和css隐藏/显示选定的表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！