查看: 591|回复: 3
打印 上一主题 下一主题

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

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

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

    [LV.3]偶尔看看II

    238

    主题

    552

    回帖

    4万

    积分

    禁止发言

    积分
    47766
    跳转到指定楼层
    1
    发表于 2020-2-12 21:09:33 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
    本帖最后由 lbhl 于 2020-2-12 21:10 编辑

    <span class="word">
            very <span class="red"> neat </span>  and clean
            <span class="chn">整洁的, <span class="bold" 干净</span>的</span>
    </span>

    每个词头中英释义在一个span.word标签中。
    里面的全部中文释义用仅一个span.chn标签围绕,span.chn标签中可以有子标签如例中span.bold。其余部分是英文释义。英文释义的文本也可以有各种样式修饰如例中red样式,但英文释义绝对不会出现在span.chn中。

    如何用css,javascript,jquery等方法,将英文部分隐藏,仅显示中文部分?即,最后转换完的效果:

    <span class="word">
            <span class="chn">整洁的, <span class="bold" 干净</span> 的</span>
    </span>

    因为英文释义部分没有标签围绕,貌似不大好处理。我用jquery的 addclass方法在最外层span动态加一个事先定义的样式 .hide {display: none;},再在中文释义标签上动态加一个内联样式 display:inline。这样中文释义样式的两个设置是冲突的,一个是inline即显示,一个是从外层span.hide继承的none不显示,此时根据CSS冲突解决机制应该是内联样式设置优先,中文释义最终将不会被隐藏,被隐藏的只有英文部分,效果就达到了。

    哪知,上词典软件一试根本不是这么回事,中文和英文全部都被隐藏了。

    $("span.word").addClass("hide");
    $("span.chn").css("display","inline");

    哪位前辈指点一下,谢谢!

  • TA的每日心情

    前天 00:54
  • 签到天数: 344 天

    [LV.8]以坛为家I

    1

    主题

    703

    回帖

    1万

    积分

    状元

    Rank: 9Rank: 9Rank: 9

    积分
    12764
    推荐
    发表于 2020-2-13 00:05:29 | 只看该作者
    本帖最后由 mtaa 于 2020-2-13 00:12 编辑

    中英混合的span.word标签下,有4个子节点,分别是text, span.red, text, span.chn。你可以通过el.childNodes遍历删掉不需要的节点就好了,el是span.word,删除节点用el.removeChild(el.childNodes[0])。担心删错的话,可以先确定子节点的nodeType和className。

  • TA的每日心情

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

    [LV.3]偶尔看看II

    238

    主题

    552

    回帖

    4万

    积分

    禁止发言

    积分
    47766
    3
     楼主| 发表于 2020-2-13 15:19:17 | 只看该作者
    mtaa 发表于 2020-2-13 00:05
    中英混合的span.word标签下,有4个子节点,分别是text, span.red, text, span.chn。你可以通过el.childNode ...

    谢谢指点!但是我的本意只是临时切换到仅显示中文而非永久性删除英文。象您这种方法删除了英文节点只显示中文之后,如果想要再切换回原先中英同在的状态怎么弄呢?
    我在想,如果英文里没有再去嵌套混杂任何标记的话,本可用如下方法:
    $('span.word').contents().filter(function(){return this.nodeType == Node.TEXT_NODE;})  过滤出英文,然后强行给英文加上一个临时标签且让这个标签display:none。这样如果今后要切换回来只要将刚加上的标签删除就可以。
    无奈,英文中还混有其他标记,不全是Node.TEXT_NODE这个类型。
    难啊!
  • TA的每日心情

    前天 00:54
  • 签到天数: 344 天

    [LV.8]以坛为家I

    1

    主题

    703

    回帖

    1万

    积分

    状元

    Rank: 9Rank: 9Rank: 9

    积分
    12764
    4
    发表于 2020-2-13 19:08:52 | 只看该作者
    本帖最后由 mtaa 于 2020-2-14 04:23 编辑
    lbhl 发表于 2020-2-13 15:19
    谢谢指点!但是我的本意只是临时切换到仅显示中文而非永久性删除英文。象您这种方法删除了英文节点只显示 ...

    可以遍历el.childNodes,通过判断span.chn区分节点类型,用三个array分别存英文,中文,英文节点的字符串,最后给英文array加上临时标签,把所有节点拼字符串一起放回innerHTML里。