Question

我正在尝试将另一个过滤器添加到常见问题解答类别＆gt;带有过滤器应用程序的问题，并且基本上复制了第一个过滤器的工作代码，但即使我已经设置了第二个实体类型，它也无法正常工作过滤。请参阅下面的示例代码。

我的cshtml代码：

@using ToSic.SexyContent
@functions
    {
    // variable which will contain the sorted categories
    IEnumerable<dynamic> sortedCategories;

    IEnumerable<dynamic> sortedTypes;

    // Prepare the data - get all categories through the pipeline
    public override void CustomizeData()
    {
    // get all categories of these questions, then get the distinct entities
    // this could all be done on 1 line, but it would be harder for people who don't know LINQ yet
    var questionsInThisModule = AsDynamic(App.Data["CO-Filter"].List);
    var categoriesUsed = questionsInThisModule.SelectMany(q => ((List<DynamicEntity>)q.Categories));
    var distinctCategories = categoriesUsed.Select(AsEntity).Distinct();    // Distinct only works reliably when cast as entity
    sortedCategories = AsDynamic(distinctCategories).OrderBy(q => q.Name);

    var typesInThisModule = AsDynamic(App.Data["CO-Filter"].List);
    var typesUsed = typesInThisModule.SelectMany(a => ((List<DynamicEntity>)a.Types));
    var distinctTypes = typesUsed.Select(AsEntity).Distinct();    // Distinct only works reliably when cast as entity
    sortedTypes = AsDynamic(distinctTypes).OrderBy(a => a.Name);
    }
}
<h2 class="sc-element">@ListContent.Title @ListContent.Toolbar</h2>
<div>@Html.Raw(ListContent.Introduction)</div>
<div>
    <strong>@App.Resources.FilterBy </strong>
    <select id="ddlFeatureFilter">
        <option value="all">@App.Resources.ShowAll</option>
        @foreach (var cat in sortedCategories)
        {
        <option value="@cat.EntityId">@cat.Title</option>
        }
    </select>
</div>
<div>
    <strong>@App.Resources.FilterBy </strong>
    <select id="ddlFeatureFilterOne">
        <option value="allOne">@App.Resources.ShowAll</option>
        @foreach (var catOne in sortedTypes)
        {
        <option value="@catOne.EntityId">@catOne.Title</option>
        }
    </select>
</div>
<ol>
    @foreach (var q in AsDynamic(App.Data["CO-Filter"]))
    {
    <li class="sc-element faq-set faq-setOne" data-tags="@String.Join(",", ((List<DynamicEntity>)q.Categories).Select(a => AsDynamic(a).EntityId))">
        @q.Toolbar @Edit.Toolbar(actions: "edit,new", contentType: "CO-Filter")
        <a class="faq-question" style="cursor: pointer">
            @if(!String.IsNullOrEmpty(q.LinkText))
            {
            @q.LinkText
            } else {
            @q.Link
            }
        </a>
    </li>
    }
</ol>

<script src="@App.Path/assets/faq.js" data-enableoptimizations="true"></script>

<script>
    $(document).ready(function() {
    initFaqSection("DnnModule-" + @Dnn.Module.ModuleID, "@ListPresentation.ShowEffect");
    });
</script>

我更新的资产/常见问题解答代码：

function initFaqSection(containerSelector, showEffect) {
    var container = $("." + containerSelector);
    $(".faq-question", container).click(function (e) {
        var answer;
        switch(showEffect) {
            case "slide":
                answer = $(e.target).closest(".faq-set").find(".faq-answer");
                answer.slideToggle();
                e.preventDefault();
                break;
            case "lightbox":
                var question = $(e.target);
                answer = question.next();
                answer.dialog({
                    title: question.text(),
                    autoOpen: true,
                    dialogClass: "dnnFormPopup",
                    modal: true
                });
            default:
                break;
        }
    });

    // Attach drop-down filter
    $("#ddlFeatureFilter", container).change(function (changeEvent) {
        var tagFilter = changeEvent.target[changeEvent.target.selectedIndex].value;
        console.log("tf:" + tagFilter);
        //alert(tagFilter);
        $(".faq-set", container).each(function (i, e) {
            var tags = ($(e).attr('data-tags') + ",all").split(',');
            console.log(tags);
            if ($.inArray(tagFilter, tags) != -1)// || tagFilter == "all")
                $(e).slideDown();
            else
                $(e).slideUp();
        });
    });

        // Attach drop-down filter
    $("#ddlFeatureFilterOne", container).change(function (changeEvent) {
        var tagFilter = changeEvent.target[changeEvent.target.selectedIndex].value;
        console.log("tf:" + tagFilter);
        //alert(tagFilter);
        $(".faq-set", container).each(function (i, e) {
            var tags = ($(e).attr('data-tags') + ",allOne").split(',');
            console.log(tags);
            if ($.inArray(tagFilter, tags) != -1)// || tagFilter == "allOne")
                $(e).slideDown();
            else
                $(e).slideUp();
        });
    });

}

内容项实体字段设置：

内容项本身：

我目前拥有的内容（请注意，第二个过滤器仅显示，但不会按“类型”过滤）。

我知道我的代码不正确但有一个简单的解决方案吗？

此外，如果显示链接（用户没有输入链接文本）以删除路径网址和扩展名，有没有简单的方法？

THX

更新

我试图像这样创建一个组合函数：

function initFaqSection(containerSelector, showEffect) {
    var container = $("." + containerSelector);
    $(".faq-question", container).click(function (e) {
        var answer;
        switch(showEffect) {
            case "slide":
                answer = $(e.target).closest(".faq-set").find(".faq-answer");
                answer.slideToggle();
                e.preventDefault();
                break;
            case "lightbox":
                var question = $(e.target);
                answer = question.next();
                answer.dialog({
                    title: question.text(),
                    autoOpen: true,
                    dialogClass: "dnnFormPopup",
                    modal: true
                });
            default:
                break;
        }
    });
    // Attach drop-down filters
    function runFilters() { 
        var filter1 = $("#ddlFeatureFilterOne").value;
        var filter2 = $("#ddlFeatureFilterTwo").value;
        //alert(filters);
        $("#ddlFeatureFilterTwo", container).change(runFilters);
            $(".faq-set", container).each(function (i, e) {
            var tags = ($(e).attr('data-tags') + ",allTwo").split(',');
            console.log(tags);
            if ($.inArray(filter1, tags) != -1 && $.inArray(filter2, tags) != -1)
                $(e).slideDown();
            else
                $(e).slideUp();
            });
    }
}

使用我的cshtml代码如下：

<div>
    <strong>@App.Resources.FilterBy </strong>
    <select id="ddlFeatureFilterOne">
        <option value="allTwo">@App.Resources.ShowAll</option>
        @foreach (var catOne in sortedCategories)
        {
        <option value="@catOne.EntityId">@catOne.Name</option>
        }
    </select>
    <select id="ddlFeatureFilterTwo">
        <option value="allTwo">@App.Resources.ShowAll</option>
        @foreach (var catTwo in sortedTypes)
        {
        <option value="@catTwo.EntityId">@catTwo.Name</option>
        }
    </select>
</div>

但这仍然只适用于第一个过滤器？

Answer 1

所以只是作为旁注：你在一个问题中提出了一系列不同的问题，这使得回答更加困难。我建议你将来分开问题。

现在你遇到的问题是你有两个过滤器，它们目前对彼此一无所知。所以真正的解决方案是

使用合并的runFilters()方法，该方法从两个下拉列表中取值并同时应用
您的绑定应该只调用此内容，例如$("#ddlFeatureFilterOne", container).change(runFilters);

runFilters看起来像这样（pseodo代码）：

``` function runFilters（）{ var filter1 = $（＆＃34; #ddl ...＆＃34;）。value; //不确定它是否是.value var filter2 = $（＆＃34;＃...＆＃34;）...;

    $(".faq-set", container).each(function (i, e) {
        var tags = ($(e).attr('data-tags') + ",allOne").split(',');
        console.log(tags);
        if ($.inArray(filter1, tags) != -1 && $.inArray(filter2, tags) != -1)
            $(e).slideDown();
        else
            $(e).slideUp();
    });

}

```

类似的东西:)。要删除路径，您希望通过lastIndexOf（＆＃34; /＆＃34;）在JS中修剪它 - 请参阅https://www.w3schools.com/JSREF/jsref_lastindexof.asp或使用c＃等效https://msdn.microsoft.com/en-us/library/system.string.lastindexof(v=vs.110).aspx

Answer 2

我最终找到了解决方案......

它要求我添加一个＆＃39;数据标题＆＃39;标签，否则我无法链接与filter1（类别）w / filter1（类别）连接的数据：

data-title="@String.Join(",", ((List<DynamicEntity>)q.Categories).Select(a => AsDynamic(a).EntityId))"

所以我关联了数据标题＆＃39; w /我的类别过滤器和关联的数据标签＆＃39;我的类型过滤器。

我的cshtml过滤器代码：

<div>
    <strong>@App.Resources.FilterBy </strong>
    <select id="ddlFeatureFilterOne">
        <option value="allTwo">@App.Resources.ShowAll</option>
        @foreach (var catOne in sortedCategories)
        {
        <option value="@catOne.EntityId">@catOne.Name</option>
        }
    </select>
    <select id="ddlFeatureFilterTwo">
        <option value="allTwo">@App.Resources.ShowAll</option>
        @foreach (var catTwo in sortedCategoriesTypes)
        {
        <option value="@catTwo.EntityId">@catTwo.Name</option>
        }
    </select>
</div>
<ol>
    @functions{
        public static string SplitWord(string text)
        {
            int slash = text.LastIndexOf("/");
            int dot = text.LastIndexOf(".");
            dot--;
            var data = text.Substring(slash + 1, dot - slash);
            return data;
        }
    }
            @foreach (var q in AsDynamic(App.Data["CatFilter"]))
        {
                <li class="sc-element faq-set" data-title="@String.Join(",", ((List<DynamicEntity>)q.Categories).Select(a => AsDynamic(a).EntityId))" data-tags="@String.Join(",", ((List<DynamicEntity>)q.Types).Select(a => AsDynamic(a).EntityId))">
                    @q.Toolbar @Edit.Toolbar(actions: "edit,new,more", contentType: "CatFilter")
                    <a class="faq-question" href="@q.Link" style="cursor: pointer">
                        @if (!String.IsNullOrEmpty(q.LinkText))
                    {
                            @q.LinkText
                    }
                    else
                    {
                            @SplitWord(q.Link);
                    }
                    </a>
                </li>
        }
</ol>

我调整后的runFilters功能代码：

    function runFilters() { 
    var filter1 = $("#ddlFeatureFilterOne").value;
    var filter2 = $("#ddlFeatureFilterTwo").value;
    }
    //alert(tagFilter);
    $("#ddlFeatureFilterOne", container).change(function(){
        var filter1 = $("#ddlFeatureFilterOne").val();
        var filter2 = $("#ddlFeatureFilterTwo").val();
        $(".faq-set", container).each(function (i, e) {
            var title = ($(e).attr('data-title') + ",allTwo").split(',');
            var tags = ($(e).attr('data-tags') + ",allTwo").split(',');
            console.log(title);
            if ($.inArray(filter1, title) != -1 && $.inArray(filter2, tags) != -1)
            $(e).slideDown();
        else
            $(e).slideUp();
        });
    });
    $("#ddlFeatureFilterTwo", container).change(function () {
        var filter1 = $("#ddlFeatureFilterOne").val();
        var filter2 = $("#ddlFeatureFilterTwo").val();
        $(".faq-set", container).each(function (i, e) {
            var tags = ($(e).attr('data-tags') + ",allTwo").split(',');
            var title = ($(e).attr('data-title') + ",allTwo").split(',');
            console.log(tags);
            if ($.inArray(filter1, title) != -1 && $.inArray(filter2, tags) != -1)
                $(e).slideDown();
            else
                $(e).slideUp();
        });
    });

希望这可以帮助其他人解决类似问题

2sxc |按实体下拉列表向模板应用

2 个答案: