使用图像在div中切换div

我目前有以下代码：

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

所以我有这个：

我想要做的是只切换“输入”div中的那些POPUP div。 将会有另一个叫做“响应”的div，它也会有POPUP div。 所以我想在两个具有不同父div的地方使用此代码。 现在，上面的代码切换所有 POPUP div而不仅仅是输入的那些。 我怎么做？

我是JQuery的新手，但我认为到目前为止它真的很棒！

编辑奇怪的是，这些似乎都没有奏效。 也许我错过了一些东西，或者我没有给你一切帮助解决这个问题（可能是后者）。 下面是我生成的输出中的html的一部分（我在单独的应用程序中执行此操作，因此您看到的一些代码可能会想知道为什么它甚至存在，但是由于设置，我无法真正改变它（并且不想花费每次更改时需要花费的时间进行批量修改））。

 
 
 
 
merchantId
 
 
Logical Definition: This is the general definition of what the input type is in common terms.
 
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.
 
Required: Y/N
 
Input Information: varchar 32, etc.
 
  

应用程序在创建输出html文件时添加额外的

标记。 我无法阻止它，编辑它会花费更多的时间并且从长远来看会有问题。 基本上，具有merchantId行将是可见的。 可以单击它以在下面的div（POPUP）中显示信息。 我想在顶部显示所有这些POPUP div，只要它们在input div中。

编辑2我的错误。 我发现了错误，因为我没有将我的图像称为toggleinput 。 我现在有工作。

Answer 1

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

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

您可以在http://api.jquery.com/children/上查看其他示例

Answer 2

用$（’div #input> div [id ^ = POPUP]’）替换$（'[id ^ = POPUP]’）。toggle（）。toggle（）

jsfiddle.net/zrpVm/

Answer 3

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

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

如果你知道你必须在#input选择所有div元素，那么用div替换[id^=POPUP]它就可以了。

你也不应该需要$(function (){ ... }); 包装代码。 $(document).ready(function () { ... }); 足够。

Answer 4

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

 $("div#input div") 

这将选择div中具有输入id的所有div。

或者，您可以使用……

 $("div#input > div") 

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