用 js 如何实现两个 ul 选中的内容同步呢
EXDestroyer · exdestroyer · 2015-05-25 10:23:44 +08:00 · 2802 次点击这是一个创建于 3263 天前的主题，其中的信息可能已经有所发展或是发生改变。
http://ww3.sinaimg.cn/bmiddle/69dd3998gw1esgaa2piilj20ae09pmy8.jpg
当在上面列表选中图片下面会同步显示，取消的时候下面也取消；下面点击删除之后上面的也同步去选选择。
我自己只能想到用title属性去去对应的元素，但是感觉怪怪的
第 1 条附言 · 2015-05-25 11:13:13 +08:00
还忘了说，上面那个select下拉选项切换之后上面的列表会改变，但是下面的不会
 |
1
EXDestroyer OP  |
 |
2
xff1874 2015-05-25 10:31:44 +08:00
操作同一份数据，通知，两个组件同时刷新。
|
 |
3
abelyao 2015-05-25 10:40:21 +08:00 via iPhone
弄个统一 id，其中一个选中的时候，把另一个列表相同 id 的也加上选中样式。
|
 |
4
EchoChan 2015-05-25 10:44:13 +08:00
数据绑定？
|
|
5
EXDestroyer OP @abelyao 另一个列表本身是空的，只有第一个列表选中的才会出现在那里
|
|
6
EXDestroyer OP @xff1874 可以讲详细点吗，我不太明白
|
 |
7
sneezry 2015-05-25 10:46:29 +08:00
用angular什么的就会方便很多~
|
|
8
abelyao 2015-05-25 10:48:17 +08:00
@EXDestroyer 空的也行呗，上面选中的时候，下面再动态创建 dom 也可以，思路都一样嘛，或者下面默认是隐藏的，上面选中的时候下面显示出来，容易做许多。
|
|
9
EXDestroyer OP @EchoChan 你说的是 双向数据绑定 这个东西吗
|
|
10
EXDestroyer OP 对了 还忘了说，上面那个select下拉选项切换之后上面的列表会改变，但是下面的不会
|
 |
11
mhycy 2015-05-25 11:21:06 +08:00
上面的元素带上id, 或者class
具体id号就用数据库记录的id就够了 然后上面选择的时候同步加入一个新的元素进入下面的ul(有图有id还插不进去?) 同时上面的元素class加入on 如果你需要按上面的顺序呈现那么就重新生成ul,或者遍历插入,随便怎么实现 删除同理, 移除元素并遍历上面的ul找出同id的把on去掉 |
|
12
EchoChan 2015-05-25 11:35:32 +08:00
@EXDestroyer 恩。
|
 |
13
heaton_nobu 2015-05-25 11:44:50 +08:00
第一想法也是angularjs
|
 |
14
alayii 2015-05-25 13:18:14 +08:00
用事件，上面 ul 选中后 trigger 下面 ul 的一个事件，下面的 ul 监听这个事件
|
|
15
EXDestroyer OP @alayii 这个没法trigger吧，下面的顺序和对应的图片id每次都不一样
|
 |
16
kisshere 2015-05-25 13:37:14 +08:00 via Android
楼上一群菜鸟也是醉了，连angularjs这么垃圾的框架都用上了，用jQuery的each遍历上面的每个元素吧，给每个元素设置一个flag，比如title啊name啊都可以，each遍历每个flag把他append到下面就行
|
|
18
EXDestroyer OP |
|
19
kisshere 2015-05-25 13:47:09 +08:00 via Android
@EXDestroyer 如果要翻页，也只能ajax翻页吧，将数据push到一个全局array中，或者cookie也行，setinterval隔200ms遍历一次cookie，清空下面的ul，再append到下面ul中
|
 |
20
loading 2015-05-25 14:23:39 +08:00 via Android
|
|
21
xff1874 2015-05-25 17:09:41 +08:00
@EXDestroyer 我会用MVVM框架，定义一个model，两个view。一个view刷新所有的数据，另外一个view刷新model里面的部分数据（选中的）。然后监听数据的变动，刷新两个view即可。
|
|
23
xff1874 2015-05-25 17:19:11 +08:00
@mhycy 在我看来，这种方式简单多了。一个是避免了不必要的Dom操作，节点的查找，插入，删除。二是框架里面都有接口，我们只需要写几个事件的处理函数即可。
|
 |
24
feiyuanqiu 2015-05-25 17:36:34 +08:00
渣php选手试着做了一下，拖放没弄过，等下去翻翻书
http://jsbin.com/wucunagixi/1/edit?html,output |
|
25
EXDestroyer OP @feiyuanqiu 厉害，谢谢，但是我需要纯前端的，我参考一下
|
|
26
loading 2015-05-25 20:35:59 +08:00 via Android
@EXDestroyer 还没搞定吗？晕
建议去好好学下 js，别老用别人的代码。 |
|
27
EXDestroyer OP @loading 这个我不会直接用的，最多只是参考，自己现在是用的生成一个时间戳的class然后两边一起选中，但是对于翻页和切换这样做有点问题，你们说的cookie的话我不熟
|
|
28
EXDestroyer OP @loading 而且我也不是来求源码的，本身就只是一个练习的demo
|
 |
29
banri 2015-05-26 08:51:24 +08:00 via iPhone
想到的比较粗鲁的办法是上面的相册和图片编号放进array里，也就是pic[0][0]这种形式…
上面的选中后，push到下面的新array里…避免遍历的话可以采用事件委托？ 就是不知道性能怎么样… |
|
30
EXDestroyer OP 搞掂了，用了数据绑定的方法，谢谢提供思路的各位
|
Select Language