Question

我在表单中有一堆输入字段，只有在单击按钮时才会显示。如果它只是输入字段，页面上的jquery脚本本身（包含在仅包含设计和头元素的索引文件中）它可以完美地工作。但是当它包含其他表单元素（文本，复选框等）和AJAX脚本的表单内部时，它不起作用。

这是脚本：

<script>  
    $(document).ready(function() {
        $('.show').click(function() {
            $(this).next('div').slideToggle();
        });
    });
</script>

div元素（我有15个，但我认为3个就足够了）

<tr><td class="cimek"><input type="text" name="1ros1"></td></tr>
<tr><td class="elem"><input type="text" name="1rossi1">Ft</td></tr>
<tr><td class="elem"><a href="#" class="show">Új</a></td></tr>
<div class="ujDiv">
    <tr><td class="cimek"><input type="text" name="1ros2"></td></tr>
    <tr><td class="elem"><input type="text" name="1rossi2">Ft</td></tr>
    <tr><td class="elem"><a href="#" class="show">Új</a></td></tr>

    <div class="ujDiv">
        <tr><td class="cimek"><input type="text" name="1ros3"></td></tr>
        <tr><td class="elem"><input type="text" name="1rossi3">Ft</td></tr>
        <tr><td class="elem"><a href="#" class="show">Új</a></td></tr>

        <div class="ujDiv">
            <tr><td class="cimek"><input type="text" name="1ros4"></td></tr>
            <tr><td class="elem"><input type="text" name="1rossi4">Ft</td></tr>
            <tr><td class="elem"><a href="#" class="show">Új</a></td></tr>
        </div>
    </div>
</div>

我还在display:none;类上添加了.ujDiv，因为这是我第一次加载时隐藏它的唯一方法。

所以任何想法如何在文件中有其他表单元素时隐藏它们？

Answer 1

尝试上面的代码段，但我认为你必须调整它，因为在你给我们的代码之外有一个表标签：

        $(document).ready(function() {
            $('.show').click(function() {
                $(this).parents().eq(3).next('div').slideToggle();
            });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ujDiv">
        <table>
            <tr>
                <td class="cimek"><input type="text" name="1ros1"></td>
                <td class="elem"><input type="text" name="1rossi1">1</td>
                <td class="elem"><a href="#" class="show">2</a></td>
            </tr>
        </table>
        <div class="ujDiv">
            <table>
                <tr>
                    <td class="cimek"><input type="text" name="1ros2"></td>
                    <td class="elem"><input type="text" name="1rossi2">3</td>
                    <td class="elem"><a href="#" class="show">4</a></td>
                </tr>
            </table>
            <div class="ujDiv">
                <table>
                <tr>
                    <td class="cimek"><input type="text" name="1ros3"></td>
                    <td class="elem"><input type="text" name="1rossi3">5</td>
                    <td class="elem"><a href="#" class="show">6</a></td>
                </tr>
                </table>
            <div class="ujDiv">
                <table>
                    <tr>
                        <td class="cimek"><input type="text" name="1ros4"></td>
                        <td class="elem"><input type="text" name="1rossi4">7</td>
                        <td class="elem"><a href="#" class="show">8</a></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

只有当Jquery成为页面上唯一的元素时，Jquery才有效

1 个答案: