Question

我目前有以下代码：

$(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 id="input"的div，其中有一个分类（来自3-50 +）其他div，称为div id="POPUP{Some number}"。

所以我有这个：

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

我想要做的只是切换＆＃34;输入＆＃34;内的那些POPUP div。 DIV。将会有另一个名为＆＃34;响应＆＃34;那也将有POPUP div。所以我想在两个具有不同父div的地方使用此代码。现在，上面的代码切换 ALL POPUP div而不仅仅是输入的那些。我该怎么做？

我是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>

应用程序在创建输出html文件时添加额外的<div>标记。我无法阻止它，编辑它会花费更多时间并且从长远来看会有问题。基本上，merchantId的行是可见的。可以单击它以显示下面的div（POPUP）中的信息。我想在顶部显示所有这些POPUP div，只要它们位于input div内。

编辑2 我的错。我发现错误的原因是我没有将我的图片称为toggleinput。我现在正在工作。

Answer 1

您可以使用children方法。例如，假设这些是$('[id^=POPUP]').toggle()内的唯一div，而不是$("#input").children('div').toggle();，而是input。

如果不仅仅是popup div，你可以$("#input").children('div[id^=POPUP]').toggle();，但如果你不需要消除歧义，第一个会更清洁。

您可以在http://api.jquery.com/children/

查看其他示例

Answer 2

这将选择#input中ID为POPUP的所有元素。使用.children()只会降低DOM中的一个级别。 http://api.jquery.com/find/

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

如果您知道必须选择div中的所有#input元素，请将[id^=POPUP]替换为div，这样就可以了。

此外，您不需要包含代码的$(function (){ ... });。 $(document).ready(function () { ... });就足够了。

Answer 3

听起来你只需要对选择器进行一些争论。你可以嵌套选择器，这样就可以做到这一点......

$("div#input div")

这将选择div中id为input的所有div。

或者，你可以使用......

$("div#input > div")

只会选择输入div的直接子div（如果任何弹出div在其中都有div）。

Answer 4

用$（'div #input＆gt; div [id ^ = POPUP]'）替换$（'[id ^ = POPUP]'）。toggle（）。toggle（）

jsfiddle.net/zrpVm /

使用图像在div中切换div

4 个答案: