点击时使用jQuery定位特定元素的问题

Question

我正在显示一些复选框，当我们点击一​​个复选框时，应该出现一个包含“子”复选框的隐藏div。 例如： http ： //screencast.com/t/BJ8BrkeS0i

然而，正如您所看到的，div显示为第一个项目，此处为last_visit，因为它是id为“filterInput”的第一个元素。 如果我将它设为类，则会显示所有隐藏的复选框。

我可以做些什么来定位和显示仅针对所点击的项目的隐藏复选框，考虑到我使用的是具有未知字段的foreach？

foreach ($results as $value) {


    $filterOptionsString = <<<TXT

    <label class="mainFilterOption">
        <input type="checkbox" name="{$value['mongo_db_key']}">
        {$value['mongo_db_key']}
    </label>

    <div id="filterInput">
        <input type="checkbox" name="stringIs"> is<br>
        <input type="checkbox" name="stringStartsWith"> starts with<br>
        <input type="checkbox" name="stringContains"> contains<br>
    </div>

TXT;

    echo $filterOptionsString ;

}

然后，当我们单击复选框时，会出现子复选框：

$('.mainFilterOption input').on('click', function() {
    $('#filterInput').toggle();
});

Answer 1

好的，再次将#filterInput作为一个类，并执行以下操作：

$('.mainFilterOption input').on('click', function() {
    $(this).parent().next('.filterInput').toggle();
});

当你做它作为一类，所有的隐藏复选框出现，因为你调用使用的所有元素.filterInput选择，但我们需要使用仅定位到该元素在当前范围内this 。

FIDDLE DEMO

Answer 2

最初将css设置为：

#filterInput{    
    display:none;
}

然后检查复选框是否为事件

$(function(){

            $('.mainFilterOption').on('click', function() {
                if($('input:checkbox[name=demo]').is(':checked')){
                    $('#filterInput').css('display','block');
                }else{
                 $('#filterInput').css('display','none');
                }

            });

        });

工作实例：

http://jsfiddle.net/afsar_zan/WBUMx/

Answer 3

没有看到你发布的一些代码，我将不得不猜测一下。

我会像这样制作事件处理程序：

$('.mainFilterOption input').on('click', function() {
    $(this).children('.hidden').toggle();
}

...其中.hidden是你申请隐藏孩子div的类。 这样，无论选中哪个方框，该元素的子隐藏div 都将被切换。

Answer 4

尝试这个

HTML：

<label class="mainFilterOption">
        <input type="checkbox" name="value" class="checks">
        Value
    </label>

    <div id="filterInput">
        <input type="checkbox" name="stringIs"> is<br>
        <input type="checkbox" name="stringStartsWith"> starts with<br>
        <input type="checkbox" name="stringContains"> contains<br>
    </div>

脚本：

$（document）.ready（function（）{$（'＃filterInput'）。hide（）; $（document）.on（'change'，'。checks'，function（）{$（this）.parent（ ）.next（'＃filterInput'）。toggle（）;}）;}）;

例

希望它会有所帮助

Answer 5

尝试在一个块中包装foreach的内容：

foreach ($results as $value) {
    $filterOptionsString = <<<TXT
    <div class="filterBlock">
        <label class="mainFilterOption">
            <input type="checkbox" name="{$value['mongo_db_key']}">
            {$value['mongo_db_key']}
        </label>

        <div class="filterInput">
            <input type="checkbox" name="stringIs"> is<br>
            <input type="checkbox" name="stringStartsWith"> starts with<br>
            <input type="checkbox" name="stringContains"> contains<br>
        </div>
    </div>
TXT;

    echo $filterOptionsString ;

}

那么你可以这样修改你的jQuery：

$('.mainFilterOption input').on('click', function() {
    $(this).parents('.filterBlock').find('.filterInput').toggle();
});

所有这些都会遍历DOM以找到类filterBlock（或li或ul等）的第一个div，然后找到你想要隐藏的子元素。

请注意，我已将filterInput转换为类而不是id，因此每页可以有多个。

Answer 6

如果我理解你，你会想要做这样的事情： JSFIDDLE

我使用的代码：

$('.mainFilterOption input').on('click', function() {
    $(this).parent().next('.filterInput').toggle();
});

此代码将获取所有输入并应用onClick事件。 一旦在输入上触发了onClick事件，它就会跳转到下一个.filterInput