5

クリックしたボタンに応じてボックスが表示されるボタンをいくつか作成しようとしています。これを行うには、各ボックスに独自のクラスを指定し、関数に引数を渡して、ターゲットにするボックスを識別します。次に、この関数をページ上の各ボタンのonclick属性に割り当てます（イベントハンドラーを別のファイルに添付する必要があることはわかっています）。関数は次のとおりです。

var show = function(boxNumber){
    if($(this).hasClass('shown')){
       $(this).removeClass('shown');
       $(this).html('Show');
       $('.box'+boxNumber).fadeOut(1000);
      }
    else{
       $(this).html('Hide');
       $(this).addClass('shown');
       $('.box'+boxNumber).fadeIn(1000);
      }
 };

html：

<span onclick="show(1)">Box 1</span>
<div class="box1"></div>

etc. for more boxes

ただし、この機能は機能しません。まず、ボタンのhtmlはクリックしても変化しないため、このキーワードはボタンをターゲットにしていないようです。ただし、このキーワードをボタンのクラスに置き換えると、正常に機能します。

次に、この関数はボックスを細かくフェードしますが、ボタンをもう一度クリックしても非表示になりません。

私は立ち往生しているので、どんな助けもいただければ幸いです！ありがとう。

4

2 に答える 2

3

解決策 1 (すべて jQuery):

これを行う最もクリーンな方法は、クリック処理に jQuery を使用することです。フェードにはすでに jQuery を使用していますが、クリックのバインドに jQuery を使用してみませんか? これを試して：

jsフィドル

<span>Box 1</span>
<div class="box1"></div><br/>
<span>Box 2</span>
<div class="box2"></div><br/>
<span>Box 3</span>



$('span').click(function () {
    var boxNumber = $(this).index('span') + 1;
    if ($(this).hasClass('shown')) {
        $(this).removeClass('shown');
        $(this).html('Show');
        $('.box' + boxNumber).fadeIn(1000);
    } else {
        $(this).html('Hide');
        $(this).addClass('shown');
        $('.box' + boxNumber).fadeOut(1000);
    }
});

注:フェード アウトしたボックスをドキュメント内で保持したい場合は、fadeTo()代わりに を使用してみてください。

解決策 2 (混合):

ただし、onclick例で示したように、属性を使用してクリック ハンドラーをバインドする必要がある場合は、次のようにすることができます。

jsフィドル

<span onclick="show(1,this)">Box 1</span>
<div class="box1"></div><br/>
<span onclick="show(2,this)">Box 2</span>
<div class="box2"></div><br/>
<span onclick="show(3,this)">Box 3</span>



function show(boxNumber, elem) {
    $this = $(elem);

    if ($this.hasClass('shown')) {
        $this.removeClass('shown');
        $this.html('Show');
        $('.box' + boxNumber).fadeIn(1000);
    } else {
        $this.html('Hide');
        $this.addClass('shown');
        $('.box' + boxNumber).fadeOut(1000);
    }
};
于 2013-03-14T23:41:53.533 に答える
1

http://jsfiddle.net/fVENv/5/

これを行うための最良の方法は、ページの読み込み時に jquery を使用して隠しテキストを追加し、クリック時にクラスを切り替えることです (フェード トグルも同様です)。

html:

<p>Box 1</p>
<div></div><br/>
<p>Box 2</p>
<div></div><br/>
<p>Box 3</p>
<div></div><br/>

jquery:

$('p').append('<span class="show">Show</span><span class="hide">Hide</span>');
$('div').hide();
$('p').click(function () {
    $('p').click(false);
    $(this).toggleClass('hidden').next('div').fadeToggle(function(){
    $('p').click(true);
    });
});

CSS:

div {
    width:50px;
    height : 50px;
    background: red;
}
p {cursor:pointer;}
span { padding: 5px; margin-left:5px;}
p.hidden > .hide, p > .show  { display:inline }
p > .hide, p.hidden > .show { display: none; }
于 2013-03-15T00:18:59.010 に答える