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

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

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

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

有个“文字/图片”切换图标，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”

nightire #1 2013年12月18日

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

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

jiang_plus #2 2013年12月18日

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

zisasign #3 2013年12月18日

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

jiang_plus #4 2013年12月18日

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

chairy11 #5 2013年12月18日

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

zisasign #6 2013年12月18日

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

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

chairy11 #7 2013年12月18日

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

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

chairy11 #8 2013年12月18日

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

zisasign #9 2013年12月18日

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

jhjguxin #10 2013年12月18日

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

chairy11 #11 2013年12月18日

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

kabie #12 2013年12月18日

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

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

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

chairy11 #13 2013年12月18日

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

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

chairy11 #14 2013年12月18日

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

jhjguxin #15 2013年12月18日

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

kabie #16 2013年12月18日

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

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

chairy11 #17 2013年12月18日

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

而且是用了 turbolinks 的。

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

kabie #18 2013年12月18日

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

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

chairy11 #19 2013年12月18日

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

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

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

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

kabie #20 2013年12月18日

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

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

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

chairy11 #21 2013年12月18日

#20 楼 @Kabie 好啦好啦，我现在在 view 里改按钮……谢谢：）

nightire #22 2013年12月18日

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

chairy11 #23 2013年12月18日

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

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

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