javascript - 使用jQuery和CSS隐藏/显示所选表单

我尝试根据用户的选择制作一个用于隐藏/显示表单的jQuery函数！

这是我的代码，您将更好地理解。

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

我的CSS代码：

.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;
}

和jQuery代码（通过@ 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();

});

最佳答案

试试这个

$('#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

要么

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

});

Fiddle