新手问题 [已解决] emoveClass 和 addClass 没生效,为何?

chairy11 · 2013年12月18日 · 最后由 chairy11 回复于 2013年12月18日 · 4347 次阅读

问题===============================================================================

折腾半天无解,求高手解救。

有个“文字/图片”切换图标,HTML 如下

<div class="btn-group pull-right view_style">
  <%= link_to fa_icon('bars'), url_for(params.merge(text: true)) , title: '纯文字显示', class: "btn" %>
  <%= link_to fa_icon('th-large'), url_for(params.except(:text)),title:'图文显示', class: "btn checked" %>
</div>

然后 coffee 如下

$view_style = $(".view_style a")
$view_style.click ->
  $this = $(@)
  $view_style.removeClass "checked"
  $this.addClass "checked"

点击之后链接跳转正常,但 removeClass "checked"和 addClass "checked"没生效,为什么呢?

我另一组类似按钮却正常,代码是相似的,区别是这里的按钮链接不必跳转。

$filters = $('.filters button')
$filters.click (e) ->
  e.preventDefault()
  $this = $(@)
  $filters.removeClass("checked")
  $this.addClass "checked"

这段代码 removeClass "checked"和 addClass "checked"正常生效……

原因================================================================================ 链接已经跳转到新页面上了,原页面的 click 操作结果失效。

解决方案========================================================================= 不用 js 判断,直接在 view 中设置当前 url 下选中状态的图标 class: ”checked”

http://jsfiddle.net/nightire/Et8AQ/

只看代码真的没有问题……

有可能是你的 click 没绑定上去,检查一下 click 真的触发了

额 有没有可能这个 a 是动态插入的?

#3 楼 @zisasign 我也是这样想的,被自己坑过很多次了

#3 楼 @zisasign #4 楼 @jiang_plus 什么叫 a 动态插入?怎样的坑?

#5 楼 @chairy11 就是这个 a 是在页面及相关资源都载入完成后,通过 js 加入的。

比如,通过 ajax 获取新的内容,然后 js 插入的页面中。包括比如 js.erb 的情况吧。

#1 楼 @nightire #2 楼 @jiang_plus #3 楼 @zisasign #4 楼 @jiang_plus 之前,曾经我用包裹着的时候,a 的面积比较小,出现两种结果: 1.如果点中了 a,则能跳转到/text: true, 但 removeclas 不生效。 2.如果点不中 a,链接仍在当前,则 removeclas 正常生效。

后来为了点击面积增大,我直接用 a 做按钮了。

#6 楼 @zisasign 貌似不是吧,我原句已经在上面了,a 的地址 url_for(params.merge(text: true)) ,这应该是生成 html 的时候就已经生成了的,而下面的内容可能更新,但我按钮貌似没影响?

#7 楼 @chairy11 我觉得 还是按#4 楼 @jiang_plus 说的,查查 click 事件是不是触发了,加行 console.log 的……

f12 切换到 sources tab 找到你的 js 源文件 加个断点 看看

#9 楼 @zisasign #10 楼 @jhjguxin 等我研究下,你们说的这个 debug 方法我还不会……正在看 DevTool 教程,老搞不懂那个啥弄。

。。。页面都跳转了…………之前页面的东西怎么可能还保留……

这两个的区别明显就是 e.preventDefault() 啊……

#1 楼 @nightire ……你这个地址是 # ……

#10 楼 @jhjguxin #9 楼 @zisasign #4 楼 @jiang_plus #1 楼 @nightire

我暴力把 url_for(params.merge(text: true)) 改成“#“,不跳转之后,removeClass 的操作就正常了。 我觉得 click 事件应该是生效的。 所以我想是不是其实 url_for(params.merge(text: true)) 看起来只是刷新一部分,但其实整个页面代码都刷新了呢?因为我默认的 checked 在图文按钮上。它回归到默认值。

#12 楼 @Kabie 可是看起来貌似只是刷新了部分?是真的跳到全新的页面了么?

e.preventDefault() 这语句是阻止 默认的事件 触发,建议还是 debug

#13 楼 @chairy11 所以 url_for 渲染出来的和你当前地址到底分别是什么……

如果不同……就算你用了 turbolinks 也肯定是被替换掉了……这时候就要用 on 了……事实上我推荐所有的事件都用这种写法……不要用 shortcut……

#16 楼 @Kabie http://localhost:3000/http://localhost:3000/?text=true

而且是用了 turbolinks 的。

那我去掉默认值,然后有没有办法根据 url 改写我当前所在浏览状态的图标的 class?

#17 楼 @chairy11 。。。为什么要做这么奇怪的事情……

你的 view 里肯定知道当前状态吧?在那里判断然后用不同的 class 不行吗

#18 楼 @Kabie 我上面一排按钮,下面一排信息,信息分文字版和图片版,信息是

<% if params[:text] %>
    文字版列表
 <% else %>
    图片版列表
 <% end %>

是我小伙伴写的……然后,我不想在里面再插入按钮的代码……

那一般那些文字图片切换的图标,都是怎样决定当前状态的?就是 html 里本身就写好的?

#19 楼 @chairy11 ……我觉得已经很明白了……

如果你要用 JS 来改变显示方式……那么你就不能让页面跳转……内容变化也应该用 JS 处理…… 一般 dom 结构都是一致的……只用 CSS 或者搭配少量 JS 就可以实现……

既然你显示方式本来就是在 view 里控制的……我不明白为什么按钮就非要用 JS……

#20 楼 @Kabie 好啦好啦,我现在在 view 里改按钮……谢谢:)

#21 楼 @chairy11 你不是说你的页面是不跳转的么……

#22 楼 @nightire 我一开始是以为会跳转,后来听你说 URI 啥的,我对你的话的理解是:url_for(params.merge(text: true)) 只是把 params 给融合了,所以不会跳转的……

你知道我都糊里糊涂的啦……我以为只是页面图片那部分刷新一下,图标本身是不刷新的……

需要 登录 后方可回复, 如果你还没有账号请 注册新账号