javascript - 试图隐藏一个项目 block ,以便在单击特定文本框时显示,

标签 javascript jquery html

试图隐藏一个项目 block ,以便在单击特定文本框时显示, 它适用于第一个项目并且不会影响其余项目,我需要帮助才能在页面加载时隐藏另一个 id,然后在最接近它的文本框和 id =Control

                    <html>
                    <body>
                    <table>
                    <tr>
                            <td><label>Approved Within 24HRS:</label></td>
                            <td><input name = "LLC_Veri_Approved" type = "text" size = "20" /></td>
                    </tr>
                    <tr>
                            <td><label>Not Approved:</label></td>
                            <td><input id = "control" name = "LLC_Veri_NotApproved" type = "text" size = "20" /></td>
                    </tr>
                    </table>

                    <h4>Number Of Verifications(LLC) Not Approved Reasons</h4>
                    <table id="Rtable">
                    <tr>
                            <td><label>No Receipt Attached:</label></td>
                            <td><input name = "LLC_No_Receipt" type = "text" size = "20" /></td>
                    </tr>
                    <tr>
                            <td><label>No Stamp Duty:</label></td>
                            <td><input name = "LLC_No_Stamp" type = "text" size = "20" /></td>
                    </tr>
                    </table>

                    <table>
                    <tr>
                            <td><label>Approved Within 24HRS:</label></td>
                            <td><input name = "LLC_Veri_Approved" type = "text" size = "20" /></td>
                    </tr>
                    <tr>
                            <td><label>Not Approved:</label></td>
                            <td><input id = "control" name = "LLC_Veri_NotApproved" type = "text" size = "20" /></td>
                    </tr>
                    </table>

                    <h4>Number Of Verifications(BN) Not Approved Reasons</h4>
                    <table id="Rtable">
                    <tr>
                            <td><label>No Receipt Attached:</label></td>
                            <td><input name = "BN_No_Receipt" type = "text" size = "20" /></td>
                    </tr>
                    <tr>
                            <td><label>No Stamp Duty:</label></td>
                            <td><input name = "BN_No_Stamp" type = "text" size = "20" /></td>
                    </tr>
                    </table>

                    <table>
                    <tr>
                            <td><label>Approved Within 24HRS:</label></td>
                            <td><input name = "IT_Veri_Approved" type = "text" size = "20" /></td>
                    </tr>
                    <tr>
                            <td><label>Not Approved:</label></td>
                            <td><input id = "control" name = "IT_Veri_NotApproved" type = "text" size = "20" /></td>
                    </tr>
                    </table>

                    <h4>Number Of Verifications(IT) Not Approved Reasons</h4>
                    <table id="Rtable">
                    <tr>
                            <td><label>No Receipt Attached:</label></td>
                            <td><input name = "IT_No_Receipt" type = "text" size = "20" /></td>
                    </tr>
                    <tr>
                            <td><label>No Stamp Duty:</label></td>
                            <td><input name = "IT_No_Stamp" type = "text" size = "20" /></td>
                    </tr>
                    </table>
            </body>
            <script type="text/javascript">

     $(document).ready(function(){
    //trying to hide all the tables with id=Rtable but works only for the first
    $('#Rtable').hide();

     //when you click on any of the textboxes with id = control
     $('#control').on('click', function(){
        $('#Rtable').show();
     });



});

            </script>
            </html>

最佳答案

Id 必须是唯一的,对于 controlRtable 元素使用类而不是 ids:

<input class="control" name="IT_Veri_NotApproved" type="text" size="20" />

JS:

$('.control').on('click', function () {
    $(this).closest('table').nextAll('.Rtable:first').show();
});

演示:http://jsfiddle.net/3ctgnmLy/

关于javascript - 试图隐藏一个项目 block ,以便在单击特定文本框时显示,,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27959053/

相关文章:

Jquery:如何识别元素的类

javascript - 单击 MVC 应用程序中的标签时如何选中所有复选框?

javascript - 如何在 React.js 中调整 Chart.JS 元素的大小?

javascript - 在 WooCommerce 网站中接收重力形式错误

javascript - 有人知道能够固定位置的 jQuery 鱼眼/停靠导航插件吗?

javascript - JavaScript 脚本仅在 Internet Explorer 开发人员工具栏可见时在 Internet Explorer 上运行

javascript - 在 SAPUI5 中使用 FacetFilters 在图表容器中进行过滤

javascript - 必须在同一脚本中多次使用 $(document).ready()

html - JWplayer加载后元素位置发生变化

javascript - 它不会读取我在 Javascript 中指定的文本框的某些值