Question

我的hide_fields()功能出错了。我试图隐藏所有' row-layout-field '<div> - s然后显示同一个parent（）parent（）内的某些div作为<select>

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

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

代码粘贴在下面。

标记来自使用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

也许不是最优雅，但也有效。

Answer 1

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

  $(this).parent().find('.row-layout-field').hide();

Answer 2

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

我设法用这个来实现我所需要的：http://pastie.org/4467732

也许不是最优雅，但也有效。

仅隐藏父元素的子元素

2 个答案: