掌上百科 - PDAWIKI

 找回密码
 免费注册

QQ登录

只需一步,快速开始

查看: 721|回复: 3

[求助] 如何用CSS JS隐藏标签中的英文部分只保留中文?

[复制链接]
  • TA的每日心情

    2019-9-23 23:38
  • 签到天数: 8 天

    [LV.3]偶尔看看II

    发表于 2020-2-12 21:09:33 | 显示全部楼层 |阅读模式
    本帖最后由 lbhl 于 2020-2-12 21:10 编辑
    & E3 Q! A1 \, b1 _% Q; r9 Z. @
    3 E7 p0 R. d4 x/ z  t% ]<span class="word">
    4 U3 k6 ~7 k( D9 n! ~( ]' S1 X9 ?        very <span class="red"> neat </span>  and clean7 s: M2 P( U' H/ A
            <span class="chn">整洁的, <span class="bold" 干净</span>的</span>
    9 b+ w5 V# A* {; W% _( B: l9 o+ s</span>
    7 R+ ~8 W4 y5 x% w" x( D
    + z% A+ O4 |/ T& a; t6 G) z( G每个词头中英释义在一个span.word标签中。. _$ W) B3 Q. b, A: A7 ^
    里面的全部中文释义用仅一个span.chn标签围绕,span.chn标签中可以有子标签如例中span.bold。其余部分是英文释义。英文释义的文本也可以有各种样式修饰如例中red样式,但英文释义绝对不会出现在span.chn中。
    , c( E* v8 k) w' J: O7 c
    ) ]+ O& y* L" W( ?) v! b9 u5 h! v如何用css,javascript,jquery等方法,将英文部分隐藏,仅显示中文部分?即,最后转换完的效果:
    ' k/ c. }  f( p1 H- W% L3 G8 @3 P; |
    % j/ B; |4 d! A  k<span class="word">! Q- a. t, d6 H2 k( L
            <span class="chn">整洁的, <span class="bold" 干净</span> 的</span>' @! @% }; h% ]( M* `
    </span>
    ( s3 n( s( e+ X" [2 F
    6 q( ^3 I4 Q0 C' ?因为英文释义部分没有标签围绕,貌似不大好处理。我用jquery的 addclass方法在最外层span动态加一个事先定义的样式 .hide {display: none;},再在中文释义标签上动态加一个内联样式 display:inline。这样中文释义样式的两个设置是冲突的,一个是inline即显示,一个是从外层span.hide继承的none不显示,此时根据CSS冲突解决机制应该是内联样式设置优先,中文释义最终将不会被隐藏,被隐藏的只有英文部分,效果就达到了。
    " {# w5 C! L# P* @- j
    . m; E$ H7 Q1 G: l. ]哪知,上词典软件一试根本不是这么回事,中文和英文全部都被隐藏了。
    - I( c# }* g4 ~: j" H4 N# p5 u, ?- Z$ u, z+ [
    $("span.word").addClass("hide");: g5 d; A! [8 J" Y# p- k0 i
    $("span.chn").css("display","inline");
    ' `' |3 a. `1 f9 {4 _7 B' S9 c* ?3 v' G" M) o% y% G. H
    哪位前辈指点一下,谢谢!# ?3 C# ?  @8 e4 p  ?" K7 Y

    9 K1 N# q7 X! a, }0 }1 X. K
  • TA的每日心情

    2023-3-29 00:54
  • 签到天数: 344 天

    [LV.8]以坛为家I

    发表于 2020-2-13 00:05:29 | 显示全部楼层
    本帖最后由 mtaa 于 2020-2-13 00:12 编辑 . g; J8 M& D* f$ Q  M
    9 P" A( _1 u% }# J. B  u( W1 B
    中英混合的span.word标签下,有4个子节点,分别是text, span.red, text, span.chn。你可以通过el.childNodes遍历删掉不需要的节点就好了,el是span.word,删除节点用el.removeChild(el.childNodes[0])。担心删错的话,可以先确定子节点的nodeType和className。9 |  |7 d* |$ b5 R8 r6 X( r

    ) P/ Q6 N$ q& z. ]2 ?# U" `, m' F
  • TA的每日心情

    2019-9-23 23:38
  • 签到天数: 8 天

    [LV.3]偶尔看看II

     楼主| 发表于 2020-2-13 15:19:17 | 显示全部楼层
    mtaa 发表于 2020-2-13 00:058 H) k2 N- x8 b! V8 [
    中英混合的span.word标签下,有4个子节点,分别是text, span.red, text, span.chn。你可以通过el.childNode ...

    ) A% G. Z2 b# b2 o. o5 K8 l谢谢指点!但是我的本意只是临时切换到仅显示中文而非永久性删除英文。象您这种方法删除了英文节点只显示中文之后,如果想要再切换回原先中英同在的状态怎么弄呢?
    ' D3 `8 D6 d- X' U/ c/ ]我在想,如果英文里没有再去嵌套混杂任何标记的话,本可用如下方法:
    6 W( u5 J# X! d9 t$ U$('span.word').contents().filter(function(){return this.nodeType == Node.TEXT_NODE;})  过滤出英文,然后强行给英文加上一个临时标签且让这个标签display:none。这样如果今后要切换回来只要将刚加上的标签删除就可以。
    2 p8 o" e& L1 T8 x$ ^- D, e无奈,英文中还混有其他标记,不全是Node.TEXT_NODE这个类型。
    2 S! Q; c" U4 F难啊!
  • TA的每日心情

    2023-3-29 00:54
  • 签到天数: 344 天

    [LV.8]以坛为家I

    发表于 2020-2-13 19:08:52 | 显示全部楼层
    本帖最后由 mtaa 于 2020-2-14 04:23 编辑
    " d8 D% H) S6 L6 P) m, e# E* K' M
    lbhl 发表于 2020-2-13 15:19
      Z# W) y* m% p, v) R; X谢谢指点!但是我的本意只是临时切换到仅显示中文而非永久性删除英文。象您这种方法删除了英文节点只显示 ...
    ; r0 I! k3 \$ C* q
    可以遍历el.childNodes,通过判断span.chn区分节点类型,用三个array分别存英文,中文,英文节点的字符串,最后给英文array加上临时标签,把所有节点拼字符串一起放回innerHTML里。  G2 i% @0 H( s( s1 z1 {2 s
    您需要登录后才可以回帖 登录 | 免费注册

    本版积分规则

    小黑屋|手机版|Archiver|PDAWIKI |网站地图

    GMT+8, 2024-3-28 17:46 , Processed in 0.028565 second(s), 9 queries , MemCache On.

    Powered by Discuz! X3.4

    Copyright © 2001-2023, Tencent Cloud.

    快速回复 返回顶部 返回列表