0

ページに多数の div (エース エディターを含む) があります。エディター自体は要求があった場合にのみ表示される必要があるため、各 div の上にアンカーを追加し、クリック機能を使用して公開します。

問題は、表示したいdivだけが表示されるのではなく、そのような非表示のdivがすべて表示されることですか? 誰でも間違いを見つけることができますか？

HTML

<p>Description of block one:</p>
<a class="expand-textarea" style="display: none" href="#">Click to Edit</a>
<div id="pref_id1_cont" style="position:relative; height:250px; width: 100%;">
    <p>Ace Editor 1 goes here!</p>
</div>

<p>Description of block 2: </p> 
<a class="expand-textarea" style="display: none" href="#">Click to Edit</a>
<div id="pref_id2_cont" style="position:relative; height:250px; width: 100%;">
    <p>Ace Editor 2 goes here!</p>
</div>

JS

window.onload = function() {
    $('# pref_id1_cont').hide();
    $('.expand-textarea').show().click(function() {
        $(this).hide();
        $('#pref_id1_cont').show();
    });

    $('#pref_id2_cont').hide();
    $('.expand-textarea').show().click(function() {
        $(this).hide();
        $('#pref_id2_cont').show();
    });
};

JSFiddle

これをより簡単な方法で行う方法についての提案も大歓迎です。現在、これは多くのテンプレートに依存する更新中の古いコードです。長期的には、ブロックごとにjsを複製するのではなく、エディターブロックを動的に作成するだけです。上記のアプローチは、私がすでに持っているものをチェックするためのものです。

4

3 に答える 3

2

これを試してください -デモ

window.onload = function() {
    $('[id^=pref_id]').hide();
    $('.expand-textarea').show().click(function() {
        $(this).hide().next('div').show();
    });
};​
于 2012-11-01T12:38:13.917 に答える
0

すべてのタグで同じクラスを使用しているaため、いずれかがクリックされると、これらの各イベント ハンドラーが起動します。次のようなことを試してください：

window.onload = function() {
    $('#pref_id1_cont').hide();
    $('#pref_id2_cont').hide();
    $('#pref_id3_cont').hide();

    $('.expand-textarea').click(function() {
        $(this).next("div").show();
    });
};​

を使用すると、 の次を.next()取得できます。この場合、それは要素です。div.expand-textareapref_id#_cont

一致した要素のセット内の各要素の直後の兄弟を取得します。セレクターが指定されている場合、そのセレクターに一致する場合にのみ、次の兄弟を取得します。

例

于 2012-11-01T12:38:24.533 に答える
0

私は次のような問題に取り組みます：

http://jsfiddle.net/KTDyr/14/

HTML

<div class="con">
    <p class="expand-textarea-con">        
        Show the following HTML in the OPAC, 
        <a class="expand-textarea" href="#">Click to Edit</a>
    </p>
    <div class="expanded-textarea" style="display:none">
        <p>Ace Editor 1 goes here!</p>
        <p class="expanded-textarea-close">Close</p>
    </div>
</div>

jQuery

$(".expand-textarea").click(function() {
    $(this).parent().parent().find('.expanded-textarea').show();
    $(this).parent().hide();

});    

$(".expanded-textarea-close").click(function() {
    $(this).parent().hide();
    $(this).parent().parent().find('.expand-textarea-con').show();

});

CSS

.expand-textarea {
display:inline;
color:blue;
text-decoration:underline;
cursor:pointer;
}

.expanded-textarea {
width: 100%; 
height:250px;    
position:relative;
background:orange;    
}

.expanded-textarea-close {
color:blue;
text-decoration:underline;
cursor:pointer;
}​
于 2012-11-01T12:54:57.570 に答える