使用jQuery / CSS显示/隐藏所选表单 [英] Show/hide selected form with jQuery/CSS

问题描述

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

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

  ... 
< p id =joinChoiceclass =parent> 
< a href =id =mastercardChoice>< span class =overlay>< / span>< / a> 
< a href =id =visaChoice>< span class =overlay>< / span>< / a> 
< a href =id =discoverChoice>< 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> 
  

span＃overlay in是一个简单的复选框图片替换！

我只需要一个函数隐藏/查看每个表单选择的卡类型！

对于#joinChoice我已经做了： p>

  $（'＃joinChoice a'）。click（function（）{
 $（this）.addClass '）
 .siblings（）。removeClass（'on'）; 
}）; 
  

可以帮我更多

解决方案

更新

我缺少一个重要的行：

  e.preventDefault（）; 
 

当点击< a> / code> s。

HTML：

  < 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> 
  

JavaScript：

  $（'＃joinChoice a'）。click（function（e）{
 
 //防止点击事件向上传播到DOM树
 // ，在这种情况下阻止页面重新加载。
 e.preventDefault（）; 
 
 var $ this = $（e.target）; 
 
 / /重置别人
 var $ links = $ this.siblings（）; 
 $ links.removeClass（'on'）; 
 $ links.each（functionElement）{
 $（'＃'+ $（linkEl）.data（'form-id'））.hide（）; 
}）; 
 
 //激活用户选择.. 
 $ this.addClass（'on'）
 $（'＃'+ $ this.data（'form-id'））show（）; 
 
} 
  

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"><span class="overlay"></span></a>
    <a href="" id="visaChoice"><span class="overlay"></span></a>
    <a href="" id="discoverChoice"><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>

The span#overlay in is a simple checkbox image replacement !

I just need a function for hide/view each form for selected Card type !

For the #joinChoice i've already make this :

    $('#joinChoice a').click(function(){
    $(this).addClass('on')
        .siblings().removeClass('on');
  });

Could you help me more please

解决方案

Update

I was missing an important line:

e.preventDefault();

That prevents the page to reload when clicking on the <a>s.

The HTML:

<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>

The Javascript:

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

    // prevents the click event to propagate up the DOM tree
    // And thus, prevents the page to reload, in that case..
    e.preventDefault();

    var $this = $(e.target);

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

});

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