0

ユーザーの選択に基づいてフォームを非表示/表示するためのjQuery関数を作成しようとしています!

これがあなたがよりよく理解できる私のコードです。

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

の span#overlay は、単純なチェックボックスの画像置換です!

選択したカードタイプの各フォームを非表示/表示する機能が必要です!

#joinChoice については、すでにこれを作成しています：

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

もっと助けてくれませんか

4

2 に答える 2

1

このようなもの？

HTML

<p id="joinChoice" class="parent">
    <a href="javascript:void(0)" id="mastercard"><span class="overlay">Mastercard</span></a>
    <a href="javascript:void(0)" id="visa"><span class="overlay">Visa</span></a>
    <a href="javascript:void(0)" id="discover"><span class="overlay">Discover</span></a>
</p>

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

CSS

.joinForm div {
    display: none;
}
.on {
    color: red;
    background: yellow;
}

jQuery

$('#joinChoice a').click(function(){
    $('#joinChoice a').removeClass('on'); /* remove class from all siblings */
    $(this).addClass('on'); /* add class to active sibling */

    $('.joinForm div').hide(); /* hide all other forms */
    var subElement = '#' + $(this).attr("id") + 'Form';
    $( subElement ).show(); /* show active form */
});

そしてデモ

于 2013-11-13T10:09:01.453 に答える
0

アップデート

重要な行がありませんでした:

e.preventDefault();

これにより、s をクリックしたときにページがリロードされなくなります<a>。

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>

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

});
于 2013-11-13T10:01:48.940 に答える