V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
BrJfUsTD
V2EX  ›  JavaScript

付费找大佬帮忙写个 JavaScript 脚本

  •  1
     
  •   BrJfUsTD · 2021-09-12 11:23:44 +08:00 · 2955 次点击
    这是一个创建于 1166 天前的主题,其中的信息可能已经有所发展或是发生改变。

    小白一枚,尝试自己研究没搞定,所以在这求助大家,不知这个需求是否能实现。

    有愿意帮忙的大佬麻烦留个联系方式和报价,提前感谢!


    需求如下:

    为 HTML 页面添加搜索功能,最好用 jQuery 语法写

    页面里有一组汽车型号列表,不同型号有属于各自的种类(例如汽油车、柴油车、电动车)

    部分汽车型号针对市场不同有不同发布名称,但列表只有国内市场发布名称

    需要实现的效果是,页面添加搜索框,输入汽车型号关键词显示对应的产品

    由于列表只有国内市场发布名称,所以数据源在脚本里定义好,结合 <li> CSS 选择器找到对应的汽车型号,下面详细说明:

    HTML 内容( id 选择器对应汽车型号,class 选择器对应汽车种类,这些在页面里已经有)

    <ul>
    <li id="gwmc30" class="battery">长城 C30</li>
    <li id="geelytx4" class="diesel">英伦 TX4</li>
    <li id="geely300t" class="petrol">星越 300T</li>
    </ul>

    脚本里定义好对应关系(格式类似下面)

    gwmc30:长城 C30,丹麦市场名称,其它市场名称
    geelytx4:英伦 TX4,丹麦市场名称,其它市场名称
    geely300t:星越 300T,丹麦市场名称,其它市场名称

    上面是主要需求,还有另外两个小需求,能实现更好

    1. 在页面添加种类筛选按钮,例如点击汽油车按钮就显示所有汽油车型号(利用列表里的 class 选择器)
    2. 搜索框下面添加热门汽车型号( HTML 文本元素),点击就自动填入搜索框,并显示搜索结果

    HTML 样本 https://codepen.io/zhao3574/pen/WNOxKyd

    13 条回复
    Vhc001
        1
    Vhc001  
       2021-09-12 11:54:50 +08:00
    预算多少?
    cpstar
        2
    cpstar  
       2021-09-12 12:02:46 +08:00
    var result=[];
    $("ul li").each(function(){
    var $this=$(this);
    var item={};
    item.id=$this.attr("id");
    item.type=$this.class();
    item.text=$this.text();
    result.push(item);
    });

    盲写,没测试,大概这个东西。
    oldshensheep
        3
    oldshensheep  
       2021-09-12 12:04:42 +08:00
    写这个脚本的目的是干什么呢?交作业?学习?还是什么。如果是学习,那就说明遇到的问题比较好。
    如果是其他的目的……这么简单的问题……不急的话可以再学习学习,你知道答案用处也不大。

    搜索的话可以用正则表达式,搜索的结果可以拼接字符串放到 DOM 里,就可以显示结果。
    筛选你可以控制 css 的 display 。
    HolaPz
        4
    HolaPz  
       2021-09-12 12:12:57 +08:00
    JavaScript:
    const searchBar = document.querySelector("input[type='text']");
    const contentBar = document.querySelector(".prod-cate-lst");

    searchBar.onchange = function(e) {
    const keyWords = searchBar.value;
    const lis = contentBar.children;
    if(keyWords === '') {
    for(let i = 0; i < lis.length; i++)
    lis[i].classList.remove("hideLi");
    return;
    }

    for(let i = 0; i < lis.length; i++) {
    if(!lis[i].innerHTML.includes(keyWords))
    lis[i].classList.add("hideLi");
    else
    lis[i].classList.remove("hideLi");
    }
    }


    CSS:
    .hideLi {
    display: none;
    }
    Yuxiaoy
        5
    Yuxiaoy  
       2021-09-12 13:23:24 +08:00
    加 v 联系:eXl5MDIwNg==
    Yourshell
        6
    Yourshell  
       2021-09-12 16:47:11 +08:00
    Jquery 的话用 filter
    https://api.jquery.com/filter/
    BrJfUsTD
        7
    BrJfUsTD  
    OP
       2021-09-12 17:26:03 +08:00
    @cpstar 需要在脚本里定义好搜索对应关系哦,因为页面上缺少部分内容,譬如搜索海外市场发布名称时,页面里没有相关内容。大佬如果愿意写,麻烦给个联系方式。
    BrJfUsTD
        8
    BrJfUsTD  
    OP
       2021-09-12 17:31:02 +08:00
    @HolaPz 感谢答案,不过和实际需求有点不同,从页面搜索内容会导致不能用其它市场发布名称搜索,因为页面里没有这些内容。大佬如果愿意写,麻烦提供下联系方式,酬谢!
    BrJfUsTD
        9
    BrJfUsTD  
    OP
       2021-09-12 17:33:56 +08:00
    @oldshensheep
    @Yourshell 感谢回复!我再研究看看。
    BrJfUsTD
        10
    BrJfUsTD  
    OP
       2021-09-12 17:34:41 +08:00
    @Vhc001 一两百不知道行不行……
    jesseee
        11
    jesseee  
       2021-09-12 18:58:02 +08:00
    100 我接了 绿色软件 c3NzeW5t
    duan602728596
        12
    duan602728596  
       2021-09-12 19:38:52 +08:00
    我想说的是,有一种属性叫自定义属性,就不要占 class 了吧,自定义属性照样能用选择器搜索的。
    BrJfUsTD
        13
    BrJfUsTD  
    OP
       2021-09-12 19:43:11 +08:00
    @jesseee 额,傍晚有个大佬接了,先收藏了,后续有问题再麻烦!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1118 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 23:00 · PVG 07:00 · LAX 15:00 · JFK 18:00
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.