0

我的hide_fields()功能有问题。我试图隐藏所有“行布局字段” <div>-s，然后显示与<select>.

根据您从 中选择的内容<select>，应显示某些字段。

其中有几行，问题是，如果我有 3 行，当我从任何<select>-s 中选择 on 选项时，它会隐藏所有的字段。

代码粘贴在下面。

标记来自使用 ACF 的 Wordpress 管理员，所以它非常强烈，但是，如果您需要查看它，可以在这里找到：http: //pastie.org/4467255

(function($) {

    // hide_fields / a small function to hide all the conditional fields
    function hide_fields() {
        $('#acf-content_repeater table tbody tr.row td div.row-layout-field:nth-child(1n+2)').hide();
    }

    // Document Ready
    $(document).ready(function() {

        // hide all fields
        hide_fields();

        // trigger change on the select field to show selected field
        $('#acf-content_repeater table tbody tr.row td div.row-layout-field select').trigger('change');

    });

    // Hero Type change
    $('#acf-content_repeater table tbody tr.row td div.row-layout-field select').live('change', function() {

        // vars
        var value = $(this).val();

        // hide all fields
        hide_fields();

        // show the selected field
        if( value == "image" ) {
            // console.log( $(this).parent().parent().find('div.row-layout-field:nth-child(2)') );
            $(this).parent().parent().find('div.row-layout-field:nth-child(2)').show();
            $(this).parent().parent().find('div.row-layout-field:nth-child(3)').show();
            $(this).parent().parent().find('div.row-layout-field:nth-child(4)').show();
        }
        else if( value == "video" ) {
            $(this).parent().parent().find('div.row-layout-field:nth-child(4)').show();
            $(this).parent().parent().find('div.row-layout-field:nth-child(5)').show();
        }
        else if( value == "tweet" ) {
            $(this).parent().parent().find('div.row-layout-field:nth-child(5)').show();
            $(this).parent().parent().find('div.row-layout-field:nth-child(6)').show();
        }
        else if( value == "statistic" ) {
            $(this).parent().parent().find('div.row-layout-field:nth-child(6)').show();
            $(this).parent().parent().find('div.row-layout-field:nth-child(7)').show();
        }

    });

})(jQuery);

感谢您的任何帮助。

编辑：

我设法实现了我所需要的： http: //pastie.org/4467732

也许不是最优雅的，但它确实有效。

4

2 回答 2

0

您可以使用 parent 隐藏元素父级的特定子级并找到

  $(this).parent().find('.row-layout-field').hide();
于 2012-08-13T17:47:50.273 回答
0

我有点傻，我将我的答案添加到我原来的帖子中，而不是回答我自己的问题......这是上面的内容：

我设法实现了我所需要的： http: //pastie.org/4467732

也许不是最优雅的，但它确实有效。

于 2012-09-05T02:39:49.147 回答