在wordpress中获取父猫名称 - 主题修改

时间:2013-11-01 07:57:14

标签: jquery wordpress user-interface autocomplete parent

我坚持使用主题修改,我想改变wordpress jquery.ui.autocomplete的平面类别输出下拉,而不是使用父子类别输出。

因此我想要定义新属性category: {$cat->parent}并在渲染列表中调用它而不是item.label(参见.append( "<a>" + item.category + "</a>" ))。

如果这样可行,我可以为父类别提供与其他类别不同的​​样式。但我无法输出名称而不是ids。

$cat->parent抛出一个与父类猫类相对应的id列表(当没有父类时给出)。我怎么能扔掉父母的名字?


实现我需要的另一种方法是获取parent-cat-id(如下例所示),然后定义输出样式,如:

  • 如果cat的parent-cat = 0,则应用此样式
  • 如果cat的parent-cat = something-else,则应用其他样式

有人能指出我正确的方向吗?我不是一个好的程序员。我几乎没有走到正确的位置来编辑这个列表输出。如果有人在这里可以帮助我,那绝对是伟大的。我将在主题论坛上发布修改教程,并在这里(如果感激的话)尽可能多地回馈社区。

jQuery(document).ready(function($) {

                var categories = [
                {foreach $categories as $cat}
                    { category: {$cat->parent}, value: {$cat->term_id}, label: {$cat->name} }{if !($iterator->last)},{/if}
                {/foreach}
                ];
                var locations = [
                {foreach $locations as $loc}
                    { value: {$loc->term_id}, label: {$loc->name} }{if !($iterator->last)},{/if}
                {/foreach}
                ];
                var catInput = $( "#dir-searchinput-category" ),
                    catInputID = $( "#dir-searchinput-category-id" ),
                    locInput = $( "#dir-searchinput-location" ),
                    locInputID = $( "#dir-searchinput-location-id" );

                if(catInput.length > 0) {
                    catInput.autocomplete({
                        minLength: 0,
                        source: categories,
                        focus: function( event, ui ) {
                            catInput.val( ui.item.label.replace(/&amp;/g, "&") );
                            return false;
                        },
                        select: function( event, ui ) {
                            catInput.val( ui.item.label.replace(/&amp;/g, "&") );
                            catInputID.val( ui.item.value );
                            return false;
                        }
                    }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
                        return $( "<li>" )
                            .data( "item.autocomplete", item )
                            .append( "<a>" + item.category + "</a>" )
                            .appendTo( ul );
                    };
                    var catList = catInput.autocomplete( "widget" );
                    catList.niceScroll({ autohidemode: false });

                    catInput.click(function(){
                        catInput.val('');
                        catInputID.val('0');
                        catInput.autocomplete( "search", "" );
                    });
                }

1 个答案:

答案 0 :(得分:0)

我设法将另一种样式(内联css仅用于测试目的!)附加到每个父类别项。如果我现在可以通过父级&gt;子级层次结构来订购商品,那就得到我需要的东西......

有人可以在这里给我一个如何做到这一点的提示吗?这是当前的代码:

jQuery(document).ready(function($){

            var categories = [
            {foreach $categories as $cat}
                { category: {$cat->parent}, value: {$cat->term_id}, label: {$cat->name} }{if !($iterator->last)},{/if}
            {/foreach}
            ];
            var locations = [
            {foreach $locations as $loc}
                { value: {$loc->term_id}, label: {$loc->name} }{if !($iterator->last)},{/if}
            {/foreach}
            ];
            var catInput = $( "#dir-searchinput-category" ),
                catInputID = $( "#dir-searchinput-category-id" ),
                locInput = $( "#dir-searchinput-location" ),
                locInputID = $( "#dir-searchinput-location-id" );

            if(catInput.length > 0) {
                catInput.autocomplete({
                    minLength: 0,
                    source: categories,
                    focus: function( event, ui ) {
                        catInput.val( ui.item.label.replace(/&amp;/g, "&") );
                        return false;
                    },
                    select: function( event, ui ) {
                        catInput.val( ui.item.label.replace(/&amp;/g, "&") );
                        catInputID.val( ui.item.value );
                        return false;
                    }
                }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
                    if ( item.category != 0 ) {
                            return $( "<li>" )
                            .data( "item.autocomplete", item )
                            .append( "<a>" + item.label + "</a>" )
                            .appendTo( ul );       
                            }
                    else {
                    return $( "<li>" )
                    .data( "item.autocomplete", item )
                    .append( "<a style='font-weight:bold;'>" + item.label + "</a>" )
                    .appendTo( ul );       
                    }
                };
                var catList = catInput.autocomplete( "widget" );
                catList.niceScroll({ autohidemode: false });

                catInput.click(function(){
                    catInput.val('');
                    catInputID.val('0');
                    catInput.autocomplete( "search", "" );
                });
            }