V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
EXDestroyer
V2EX  ›  前端开发

用 js 如何实现两个 ul 选中的内容同步呢

  •  
  •   EXDestroyer ·
    exdestroyer · 2015-05-25 10:23:44 +08:00 · 2972 次点击
    这是一个创建于 3482 天前的主题,其中的信息可能已经有所发展或是发生改变。

    http://ww3.sinaimg.cn/bmiddle/69dd3998gw1esgaa2piilj20ae09pmy8.jpg
    当在上面列表选中图片下面会同步显示,取消的时候下面也取消;下面点击删除之后上面的也同步去选选择。

    我自己只能想到用title属性去去对应的元素,但是感觉怪怪的

    第 1 条附言  ·  2015-05-25 11:13:13 +08:00
    还忘了说,上面那个select下拉选项切换之后上面的列表会改变,但是下面的不会
    30 条回复    2015-05-27 11:40:01 +08:00
    EXDestroyer
        1
    EXDestroyer  
    OP
       2015-05-25 10:23:52 +08:00
    xff1874
        2
    xff1874  
       2015-05-25 10:31:44 +08:00
    操作同一份数据,通知,两个组件同时刷新。
    abelyao
        3
    abelyao  
       2015-05-25 10:40:21 +08:00 via iPhone
    弄个统一 id,其中一个选中的时候,把另一个列表相同 id 的也加上选中样式。
    EchoChan
        4
    EchoChan  
       2015-05-25 10:44:13 +08:00
    数据绑定?
    EXDestroyer
        5
    EXDestroyer  
    OP
       2015-05-25 10:44:28 +08:00
    @abelyao 另一个列表本身是空的,只有第一个列表选中的才会出现在那里
    EXDestroyer
        6
    EXDestroyer  
    OP
       2015-05-25 10:44:52 +08:00
    @xff1874 可以讲详细点吗,我不太明白
    sneezry
        7
    sneezry  
       2015-05-25 10:46:29 +08:00
    用angular什么的就会方便很多~
    abelyao
        8
    abelyao  
       2015-05-25 10:48:17 +08:00
    @EXDestroyer 空的也行呗,上面选中的时候,下面再动态创建 dom 也可以,思路都一样嘛,或者下面默认是隐藏的,上面选中的时候下面显示出来,容易做许多。
    EXDestroyer
        9
    EXDestroyer  
    OP
       2015-05-25 10:51:53 +08:00
    @EchoChan 你说的是 双向数据绑定 这个东西吗
    EXDestroyer
        10
    EXDestroyer  
    OP
       2015-05-25 11:10:04 +08:00
    对了 还忘了说,上面那个select下拉选项切换之后上面的列表会改变,但是下面的不会
    mhycy
        11
    mhycy  
       2015-05-25 11:21:06 +08:00
    上面的元素带上id, 或者class
    具体id号就用数据库记录的id就够了
    然后上面选择的时候同步加入一个新的元素进入下面的ul(有图有id还插不进去?)
    同时上面的元素class加入on
    如果你需要按上面的顺序呈现那么就重新生成ul,或者遍历插入,随便怎么实现

    删除同理, 移除元素并遍历上面的ul找出同id的把on去掉
    EchoChan
        12
    EchoChan  
       2015-05-25 11:35:32 +08:00
    @EXDestroyer 恩。
    heaton_nobu
        13
    heaton_nobu  
       2015-05-25 11:44:50 +08:00
    第一想法也是angularjs
    alayii
        14
    alayii  
       2015-05-25 13:18:14 +08:00
    用事件,上面 ul 选中后 trigger 下面 ul 的一个事件,下面的 ul 监听这个事件
    EXDestroyer
        15
    EXDestroyer  
    OP
       2015-05-25 13:31:55 +08:00
    @alayii 这个没法trigger吧,下面的顺序和对应的图片id每次都不一样
    kisshere
        16
    kisshere  
       2015-05-25 13:37:14 +08:00 via Android
    楼上一群菜鸟也是醉了,连angularjs这么垃圾的框架都用上了,用jQuery的each遍历上面的每个元素吧,给每个元素设置一个flag,比如title啊name啊都可以,each遍历每个flag把他append到下面就行
    loading
        17
    loading  
       2015-05-25 13:39:37 +08:00 via Android
    @kisshere 正解
    EXDestroyer
        18
    EXDestroyer  
    OP
       2015-05-25 13:41:54 +08:00
    @kisshere @loading 明白你的意思,但是遍历并不是很好的方案吧我觉得,上面是可以随时切换相册文件夹的,并且图片数量根据个人情况也不同(可能会翻页)
    kisshere
        19
    kisshere  
       2015-05-25 13:47:09 +08:00 via Android
    @EXDestroyer 如果要翻页,也只能ajax翻页吧,将数据push到一个全局array中,或者cookie也行,setinterval隔200ms遍历一次cookie,清空下面的ul,再append到下面ul中
    loading
        20
    loading  
       2015-05-25 14:23:39 +08:00 via Android
    @EXDestroyer
    @kisshere
    根本不需要遍历,在上面的点击事件处理就行。
    怕翻页,就cookie。
    xff1874
        21
    xff1874  
       2015-05-25 17:09:41 +08:00
    @EXDestroyer 我会用MVVM框架,定义一个model,两个view。一个view刷新所有的数据,另外一个view刷新model里面的部分数据(选中的)。然后监听数据的变动,刷新两个view即可。
    mhycy
        22
    mhycy  
       2015-05-25 17:11:59 +08:00
    @xff1874
    有必要么...
    增加大量代码但并不降低易用程度....囧
    xff1874
        23
    xff1874  
       2015-05-25 17:19:11 +08:00
    @mhycy 在我看来,这种方式简单多了。一个是避免了不必要的Dom操作,节点的查找,插入,删除。二是框架里面都有接口,我们只需要写几个事件的处理函数即可。
    feiyuanqiu
        24
    feiyuanqiu  
       2015-05-25 17:36:34 +08:00
    渣php选手试着做了一下,拖放没弄过,等下去翻翻书
    http://jsbin.com/wucunagixi/1/edit?html,output
    EXDestroyer
        25
    EXDestroyer  
    OP
       2015-05-25 20:24:36 +08:00
    @feiyuanqiu 厉害,谢谢,但是我需要纯前端的,我参考一下
    loading
        26
    loading  
       2015-05-25 20:35:59 +08:00 via Android
    @EXDestroyer 还没搞定吗?晕
    建议去好好学下 js,别老用别人的代码。
    EXDestroyer
        27
    EXDestroyer  
    OP
       2015-05-25 20:53:11 +08:00
    @loading 这个我不会直接用的,最多只是参考,自己现在是用的生成一个时间戳的class然后两边一起选中,但是对于翻页和切换这样做有点问题,你们说的cookie的话我不熟
    EXDestroyer
        28
    EXDestroyer  
    OP
       2015-05-25 20:54:47 +08:00
    @loading 而且我也不是来求源码的,本身就只是一个练习的demo
    banri
        29
    banri  
       2015-05-26 08:51:24 +08:00 via iPhone
    想到的比较粗鲁的办法是上面的相册和图片编号放进array里,也就是pic[0][0]这种形式…

    上面的选中后,push到下面的新array里…避免遍历的话可以采用事件委托?

    就是不知道性能怎么样…
    EXDestroyer
        30
    EXDestroyer  
    OP
       2015-05-27 11:40:01 +08:00
    搞掂了,用了数据绑定的方法,谢谢提供思路的各位
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3617 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 04:23 · PVG 12:23 · LAX 20:23 · JFK 23:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.