0

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

});
4

2 回答 2

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

});

小提琴

或者

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

});

小提琴

于 2013-11-13T11:25:47.313 回答
0

我个人更喜欢做这样的东西

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

查询

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

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

于 2013-11-13T11:30:54.783 回答