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"，其中有一个分类（从 3-50+）其他 div 称为div id="POPUP{Some number}".

所以我有这个：

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

我想要做的是只切换“输入” div 中的那些 POPUP div。将有另一个名为“响应”的 div，它也将具有 POPUP div。所以我想在两个不同父 div 的地方使用这段代码。现在，上面的代码会切换所有的 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>

该额外<div>标签由应用程序在创建输出 html 文件时添加。我真的无法阻止它，从长远来看，编辑它会花费更多时间并且会出现问题。本质上，带有的线merchantId是可见的。点击它可以在下面的div（POPUP）中显示信息。我想在顶部使用一个按钮显示所有这些 POPUP div，只要它们在inputdiv 内。

编辑 2 我的错误。我发现错误在于我没有调用我的图像toggleinput。我现在可以工作了。

4

4 回答 4

1

您可以使用该children方法。例如$('[id^=POPUP]').toggle()，您可以不做，而是做$("#input").children('div').toggle();，假设这些是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 中下降一层。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 回答