使用图片在div内切换div [英] Toggle div within a div using an image

问题描述

我目前有以下代码:

$(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}".

I have a div called div id="input" and within that there are an assortment (from 3-50+) other divs that called div id="POPUP{Some number}".

所以我有这个:

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

我要做的是仅切换输入" div内的那些POPUP div.将有另一个称为"Response"的div，该div也将具有POPUP div.因此，我想在两个具有不同父div的地方使用此代码.现在，上面的代码不仅可以切换 ALL POPUP div，而且还可以切换输入的div.我该怎么办?

What I want to do is to only toggle those POPUP divs that are within the "input" div. There will be another div called "Response" that will also have POPUP divs. So I want to use this code in two places with a different parent div. Right now, the code above toggles ALL the POPUP divs and not just the ones under input. How do I do that?

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

I'm new to JQuery, but I think it's really great thus far!

编辑 奇怪的是，这些似乎都不起作用.也许我错过了一些东西，或者我没有给您一切帮助解决此问题的方法(可能是后者).以下是我生成的输出中的html的一部分(我在单独的应用程序中执行此操作，因此您看到的一些代码可能会奇怪为什么它仍然存在，但是由于设置，我无法真正更改(并且不想花费大量时间进行每次更改)，

EDIT Oddly enough, none of these seem to be working. Perhaps I'm missing something or I haven't given you everything to help with this issue (probably the latter). Below is part of the html from the output I produce (I'm doing this in a separate application, so some of the code you see you may be wondering why it's even there, but because of the setup, I can't really change it (and don't want to take the hours it would take to do mass modifications each time a change is made)).

<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之内即可.

That extra <div> tag is added by the application when it creates the output html file. I can't really stop it, and editing it out would take more time and be problematic in the long run. Essentially, the line with merchantId would be visible. It can be clicked to display the information in the div (POPUP) below. I want to display all these POPUP divs with a single button at the top so long as they are within the input div.

编辑2 我的错.我发现错误之处在于我没有名为toggleinput的图像.我现在正在工作.

EDIT 2 My mistake. I found the error in that I didn't have my image called toggleinput. I have it working now.

推荐答案

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

You can use the children method. For example, instead of doing $('[id^=POPUP]').toggle(), you could do $("#input").children('div').toggle();, assuming those are the only divs inside of input.

如果弹出的div不仅多，您可以执行$("#input").children('div[id^=POPUP]').toggle();，但是如果您不需要消除歧义，则第一个操作会更清洁一些.

If there's more than just the popup divs, you could do $("#input").children('div[id^=POPUP]').toggle();, but the first is a little cleaner if you don't need the disambiguation.

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

You can see other examples at http://api.jquery.com/children/

这篇关于使用图片在div内切换div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！