rui297451765 2013-10-15 11:48 采纳率: 0%
浏览 1149

asp.net搜索结果筛选问题，将选择的条件添加背景色，与非选中的样式区别开来

请问如何实现像×东的多条件筛选？
主要问题是选择了一个分类，点击下一个分类不知道已经点过的分类。 还有一个就是怎么让选择的分类加个背景颜色？
有空的帮我看看代码，我做了数据筛选，能根据传不同的参数从数据库查询到想要的数据，也有js代码，现在问题就是我通过地址栏传值，
;然后在后台Request.QueryString获得值，再用Session[]已选择的值，如果点不限的时候session[]=null，js为点击加class来添加背景色（js代码没写完）
$(document).ready(function(){
$("a").bind({
click:function(){$("a").addClass('clckClass');},
});
});
问题是，点后，页面提交了变量，也刷新了页面，js就相当没加class一样。就在点击瞬间看到已变色了。

  • 写回答

1条回答 默认 最新

  • ChatGPTᴼᴾᴱᴺᴬᴵ 2023-07-16 20:06
    关注

    该回答引用ChatGPT-3.5，仅供参考，不保证完全正确

    要实现多条件筛选，并在选择的条件上添加背景色，你可以尝试以下步骤：

    1. 在前端页面中，为每个条件的选择器绑定一个点击事件，用来触发条件的选择和样式变化。你可以使用类名或自定义属性来标识每个条件的选择器。

    2. 当用户点击条件时，使用 JavaScript/jQuery 在相应的元素上添加/移除类名来改变背景色或其他样式。

    3. 为了保持选择的条件在页面刷新后的状态，可以使用以下两种方法之一：

      • 使用后端技术（如 ASP.NET）将选择的条件保存在 Session 中，并在页面加载时根据 Session 中的值来设置样式。
      • 将选择的条件作为参数传递到后端，后端根据参数值来渲染页面时设置样式。

    下面是一个示例代码，演示如何实现多条件筛选和样式设置：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>多条件筛选</title>
    <style>
        .selected {
            background-color: yellow;
            /* 其他样式 */
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 从 Session 中获取已选择的条件，例如用一个名为 selectedConditions 的 Session 变量保存已选择的条件
            var selectedConditions = <%= Session["selectedConditions"] ?? "" %>;

            // 遍历条件选择器，设置已选择的条件的样式
            $("a.condition").each(function() {
                var condition = $(this).data("condition");

                if (selectedConditions.includes(condition)) {
                    $(this).addClass("selected");
                }
            });

            // 条件点击事件
            $("a.condition").on("click", function() {
                var condition = $(this).data("condition");

                if ($(this).hasClass("selected")) {
                    // 如果已选择，移除样式并更新 Session
                    $(this).removeClass("selected");
                    selectedConditions = selectedConditions.filter(function(c) {
                        return c !== condition;
                    });
                } else {
                    // 如果未选择，添加样式并更新 Session
                    $(this).addClass("selected");
                    selectedConditions.push(condition);
                }

                // 更新 Session 中的已选择条件
                <%= Session["selectedConditions"] = selectedConditions %>;

                // 其他操作，如根据已选择的条件提交表单或刷新页面等
                // ...
            });
        });
    </script>
</head>
<body>
    <h1>多条件筛选</h1>

    <a class="condition" data-condition="category1">分类1</a>
    <a class="condition" data-condition="category2">分类2</a>
    <a class="condition" data-condition="category3">分类3</a>

    <!-- 其他内容 -->

</body>
</html>

    在上面的示例代码中，我们使用 data-condition 属性来标识每个条件，并使用 jQuery 的 addClass 和 removeClass 方法来添加和移除类名。通过读取和更新 Session 变量 selectedConditions，我们可以在页面加载和条件点击时保持选择的条件状态。

    请根据你的实际代码和需求进行相应的调整，并确保使用正确的选择器和类名来设置样式。

    该回答引用NewBing，仅供参考，不保证完全正确

    根据我从网络上搜索到的结果，您可以参考以下资源：

    • ASP.NET Core 中的筛选器 | Microsoft Learn：这个教程介绍了如何使用ASP.NET Core中的筛选器，可在请求处理管道中的特定阶段之前或之后运行代码。筛选器可以处理授权、响应缓存、错误处理等任务，也可以创建自定义筛选器来处理横切关注点[^1^]。
    • 教程：在 ASP.NET MVC 应用程序中使用 Entity Framework 添加排序、筛选和分页 | Microsoft Learn：这个教程介绍了如何在ASP.NET MVC应用程序中使用Entity Framework实现排序、筛选和分页功能。您将学习如何向控制器方法添加参数，如何使用LINQ to Entities指定排序和筛选条件，以及如何使用PagedList.Mvc库实现分页[^2^]。
    • ASP.NET Core 中的筛选器 - 星火卓越 - 博客园：这篇博客文章详细介绍了ASP.NET Core中的不同类型的筛选器，包括授权筛选器、资源筛选器、操作筛选器、异常筛选器和结果筛选器。您将了解如何实现同步和异步的筛选器接口，如何使用依赖关系注入，以及如何处理异常[^3^]。

    希望这些资源对您有所帮助。如果您还有其他问题，欢迎继续与我交流。😊

    评论

报告相同问题？

悬赏问题

  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据，怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据，怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题！
  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像，如何解决？