1

私はいくつかのjavascript/jqueryを学ぼうとしていますが、あまり進歩していません。

私はこのような複数のdivを持っています：

 <div class="article1" style="display:none;">content</div>
 <div class="article2" style="display:none;">content</div>
 <div class="article3" style="display:none;">content</div>

各クラスの下にテキストリンクがあり、クリックすると特定のdivが表示されます。

このような ：

<a href="javascript:toggle(1);" class="showarticle">View Article</a>

だから私はIDを与えることができる関数を作り、クリックするとdivを表示すると思いました、これは私が試したものです：

<script>  

            function toggle( id ) {
            $(".showarticle").click(function()){
               $(".article" + id).show();
                }    
            } 

</script>

しかし、何も起こりませんが、私は何も悪いことを見ることができません。

誰かが私にここで何をしていないのか教えてもらえますか？

ありがとう

編集：私はjqueryライブラリを含めました;）

4

4 に答える 4

2

これは、イベントハンドラーの使用方法ではありません。

イベントハンドラーは一度ロードされてから、バックグラウンドで静かに座って、何かがそれらをトリガーするのを待ちます。あなたの場合、clickリンクのクリックを待つハンドラーを（DOMがロードされた後に）ロードしたいとします。

このようなもの。HTML：

<a href="#" id="1" class="showarticle">View Article</a>

JS：

$(document).ready(function() {            // wait for DOM to load
    $(".showarticle").click(function(e) { // click handler for all .showarticles
        e.preventDefault();               // cancel normal click behavior
        $(".article" + this.id).show();   // if id="1", shows '.article1'
    });
});

これが「最小限の変更」バージョンです。ベストプラクティスはdata-、リンク上のIDの代わりに属性を使用し、divのクラスの代わりにIDを使用し、スタイルシートを使用して最初にそれらをすべて非表示にすることです。

CSS：

.togglediv {
    display:none;
}

HTML：

<div id="article1" class="togglediv">content</div>
<a href="#" data-togglediv="article1" class="showarticle">View Article</a>

JS：

$(document).ready(function() {            // wait for DOM to load
    $(".showarticle").click(function(e) { // click handler for all .showarticles
        e.preventDefault();               // cancel normal click behavior
        $div = $('#'+$(this).data('togglediv')); // http://api.jquery.com/data
        $div.show();                      // or $div.toggle() to show and hide
    });
});

http://jsfiddle.net/mblase75/sT6gw/

于 2013-02-25T22:41:27.393 に答える
1

これらのaタグの1つをクリックするたびに、clickイベントをにバインドし.showarticleますが、アクションを実行しません。1つの方法は次のとおりです。

function toggle( id ) {
  $(".article" + id).show();
}

これには、クラスの代わりにidを使用する必要があります。

于 2013-02-25T22:39:37.067 に答える
0

Javascriptのバージョンは次のようになります。各divに一意のIDを割り当てる必要があります。

function toggle_visibility(id) {
    var e = document.getElementById(id);
    if(e.style.display == "inline") {
        e.style.display = 'none';
    }
    else if(e.style.display == "none") {
        e.style.display = "inline";
    }
}
于 2013-02-25T22:38:50.910 に答える
0

マークアップを次のように修正します:(クラスから数値を削除し、マークアップjavascript関数を削除しました）

<div class="article" style="display:none;">content</div>
<a href="#" class="showarticle">View Article</a>
<div class="article" style="display:none;">content</div>
<a href="#" class="showarticle">View Article</a>
<div class="article" style="display:none;">content</div>
<a href="#" class="showarticle">View Article</a>

次に、これを実行します。構文を修正し、クリックごとにクリックハンドラーを追加することを削除し、コードを簡素化しました。

$(".showarticle").click(function () {
     $(this).prev(".article").show();
 });

編集：また今、あなたは前に表示されたものを非表示にし、最後にクリックされたものだけを表示したい：

$(".showarticle").click(function () {
    $('.article').hide();
    $(this).prev(".article").show();
});

編集：切り替える別の方法：これらがページ上の唯一の「article」クラスと「showarticle」クラスであると想定します

$(".showarticle").click(function () {
    $('.article').hide().eq($('.showarticle').index(this)).show();
});
于 2013-02-25T22:45:03.673 に答える