如何同步两个重叠的 JavaScript onclick 事件

Question

小提琴： https : //jsfiddle.net/a0bwouev/3/

我的网站有两个“层”：

1. 语言界面层（英语和法语），用户可以在其中使用首选语言浏览网站。 这围绕着网站内容：

2. 内容层，用户可以在其中以两种格式之一查看选定的拉丁文文档：解释性或外交性。

语言选择由用户点击控制：

<ul class="navbar-nav en-fr">
    <li class="nav-item">
        <span class="nav-link" id="selectEN" onclick="showEN()">EN</span>
    </li>
    <li class="nav-item">
        <span class="nav-link" id="selectFR" onclick="showFR()">FR</span>
        </li>
</ul>

这与javascript有关：

    function showEN() {
    $( ".en" ).css( "display", "inline" );
    $( ".fr" ).css( "display", "none" );
    };

    function showFR() {
    $( ".en" ).css( "display", "none" );
    $( ".fr" ).css( "display", "inline" );
    };

拉丁语视图选择更像是一个问题，因为我需要在标题的语言/文档视图选择之间切换。

我有四种可能的头衔变体，其中diplo = 外交和inter = 解释

<h4 class="en inter">Latin - Interpretive</h4>
<h4 class="en diplo">Latin - Diplomatic</h4>
<h4 class="fr inter">Latin - Interprétative</h4>
<h4 class="fr diplo">Latin - Diplomatique</h4>

然后是两个相关的<div>包含不同拉丁格式的文本：

<div class="inter">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus enim vitae condimentum ullamcorper. Nam tincidunt sagittis elit, eu sollicitudin diam sollicitudin pulvinar. Fusce sodales, lectus eu ullamcorper rutrum, lorem tortor auctor justo, vitae tempor augue metus ac nisl.</p> 
</div>
<div class="diplo">
  <p><span class="lin">[1]</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus enim vitae condimentum ullamcorper.</p>
  <p><span class="lin">[2]</span> Nam tincidunt sagittis elit, eu sollicitudin diam sollicitudin pulvinar.</p>
  <p><span class="lin">[3]</span> Fusce sodales, lectus eu ullamcorper rutrum, lorem tortor auctor justo, vitae tempor augue metus ac nisl.</p> 
</div>

用于在视图diplo和inter之间切换的两个链接：

<span class="diplo en" onclick="showInterpretive()">view interpretive</span>
<span class="inter en" onclick="showDiplomatic()">view diplomatic</span>
<span class="diplo fr" onclick="showInterpretive()">voir interprétative</span>
<span class="inter fr" onclick="showDiplomatic()">voir diplomatique</span>

这与javascript有关：

    function showDiplomatic() {
    $( ".diplo" ).css( "display", "inline" );
    $( ".inter" ).css( "display", "none" );
    };

    function showInterpretive() {
    $( ".diplo" ).css( "display", "none" );
    $( ".inter" ).css( "display", "inline" );
    };

以上所有的启动css：

.inter     {display: inline;}
.diplo     {display: none;}

.en        {display: inline;}
.fr        {display: none;}

问题是切换diplo / inter 与en / fr 冲突。 但我不确定如何解决这个问题。

提前致谢。

Answer 1

这是修改过的小提琴，它完成了你想要的吗？

这是一个例子

我所做的是我添加了一个变量来保存语言类名，并在外交官/inter 视图中将该变量附加到 CSS 选择器。

如果语言更改为保持相同的格式，我还将格式添加到状态以跟踪格式。

代替：

$('.diplomat').display('inline');

我补充说：

$('.diplomat.'+ state.lang).display('inline');

在哪里 ：

var state = { lang: 'en', format: 'i' }

当用户更改语言时，我们在 state 和 showFR/EN 中设置语言，我们检查格式以保留用户选择。

话虽如此，您没有使用 jquery 功能，有更好的方法来切换东西，因为您使用的是 jquery，请使用它来处理点击事件，而不是使用onclick它应该很容易，请阅读它。

免责声明：小提琴中的代码可以清理和改进我只是想展示这个想法