Question

我尝试根据用户的选择制作一个隐藏/显示表单的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();

});

Answer 1

试试这个

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

Answer 2

我个人更喜欢做这样的事情

<p id="joinChoice" class="parent">
    <a href="" id="mastercardChoice" onclick="openForm('mastercardForm')"><span class="overlay"></span></a>
    <a href="" id="visaChoice" onclick="openForm('visaForm')"><span class="overlay"></span></a>
    <a href="" id="discoverChoice" onclick="openForm('discoverForm')"><span class="overlay"></span></a>
</p>

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

JQUERY

function openForm(formname) {
  $('.joinForm').hide();
  $('#'+formname).show();
}

我希望它能帮助你实现目标！

使用jQuery和css隐藏/显示所选表单

2 个答案: