0

私は現在次のコードを持っています：

$(document).ready(function () {
    $(function () {
        $('#toggleinput').click(function () {
            $('[id^=POPUP]').toggle()
        });
        $(".img-swap").on('click', function () {
            if ($(this).attr("class") == "img-swap") {
                this.src = this.src.replace("_showall", "_hideall");
            } else {
                this.src = this.src.replace("_hideall", "_showall")
            }
            $(this).toggleClass("on");
        });
    });
});

私はと呼ばれるdivを持っており、div id="input"その中にはと呼ばれる他のdivの品揃え（3-50 +）がありdiv id="POPUP{Some number}"ます。

だから私はこれを持っています：

<div id="input">
    <div id="POPUP438748234793"></div>
    <div id="POPUP437857482782"></div>
</div>

私がやりたいのは、「入力」div内にあるPOPUPdivのみを切り替えることです。「Response」と呼ばれる別のdivがあり、これにもPOPUPdivがあります。したがって、このコードを、親divが異なる2つの場所で使用したいと思います。現在、上記のコードは、入力中のものだけでなく、すべてのPOPUPdivを切り替えます。それ、どうやったら出来るの？

私はJQueryを初めて使用しますが、これまでのところ本当に素晴らしいと思います。

編集 奇妙なことに、これらはどれも機能していないようです。おそらく私は何かが足りないか、この問題（おそらく後者）を助けるためにあなたにすべてを与えていません。以下は、私が作成した出力からのhtmlの一部です（これは別のアプリケーションで行っているので、表示されるコードの一部は、なぜそこにあるのか疑問に思うかもしれませんが、セットアップのため、実際には変更できませんそれ（そして、変更が行われるたびに大量の変更を行うのにかかる時間はかかりたくない））。

<div id="input">
    <div>
<ul style="list-style: disc;">
    <li class="Input1-Bullet"><p class="Input-Bullet"><a class="dropspot" href="javascript:TextPopup(this)" id="a3">merchantId</a></p>
    <div class="droptext" id="POPUP581417197" style="display: none;">
        <p class="Body1-Text">Logical Definition: This is the general definition of what the input type is in common terms.</p>
        <p class="Body1-Text">Technical Definition: This is the technical        definition of what the input type is; for example, it is the data stored in the X column 
     of the Y table.</p>
        <p class="Body1-Text">Required: Y/N</p>
        <p class="Body1-Text">Input Information: varchar 32, etc.</p>
    </div></li>
</ul>

その余分な<div>タグは、アプリケーションが出力htmlファイルを作成するときに追加されます。私はそれを本当に止めることはできません、そしてそれを編集することはより多くの時間がかかりそして長期的には問題があります。基本的に、との線が表示されmerchantIdます。クリックすると、下のdiv（POPUP）の情報が表示されます。これらすべてのPOPUPdivを、inputdiv内にある限り、上部に1つのボタンで表示したいと思います。

編集2 私の間違い。と呼ばれる画像がないというエラーが見つかりましたtoggleinput。私は今それを動かしています。

4

4 に答える 4

1

この方法を使用できますchildren。たとえば、を実行する代わりに$('[id^=POPUP]').toggle()、を実行できます。$("#input").children('div').toggle();ただし、これらが。内の唯一のdivであると想定しますinput。

ポップアップdivだけではない場合は、それを行うことができます$("#input").children('div[id^=POPUP]').toggle();が、曖昧性解消が必要ない場合は、最初の方が少しクリーンです。

他の例はhttp://api.jquery.com/children/で見ることができます

于 2013-03-13T15:43:35.530 に答える
0

#inputこれにより、IDが。内のすべての要素が選択されますPOPUP。を使用.children()すると、DOMで1レベル下がるだけです。http://api.jquery.com/find/

$('#input').find('[id^=POPUP]').toggle()

divですべての要素を選択する必要があることがわかっている場合は#input、に置き換えれば機能[id^=POPUP]しdivます。

$(function (){ ... });また、コードをラップするものは必要ありません。で$(document).ready(function () { ... });十分です。

于 2013-03-13T15:44:13.807 に答える
0

セレクターについて少しスワッティングする必要があるようです。セレクターをネストして、これを実行できます...

$("div#input div")

これにより、入力IDを持つdiv内のすべてのdivが選択されます。

または、...を使用することもできます

$("div#input > div")

これは、入力divの直接の子divのみを選択します（ポップアップdivのいずれかにdivが含まれている場合）。

于 2013-03-13T15:44:39.690 に答える
0

$（'[id ^ = POPUP]'）。toggle（）を$（'div＃input> div [id ^ = POPUP]'）。toggle（）に置き換えます

jsfiddle.net/zrpVm/

于 2013-03-13T15:51:34.180 に答える