Question

我的网站有两个“层”：

语言界面层（英语和法语），用户可以使用其首选语言浏览网站。这将围绕网站内容：
内容层，用户可以在其中查看以下两种格式之一的所选拉丁文文档：解释性或外交性。

语言选择由用户单击以下内容控制：

<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

这里的小提琴经过修改，可以完成您想要的吗？

Here is an example

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

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

代替：

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

我添加了：

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

其中：

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

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

话虽这么说，您没有利用jquery的功能，但是有更好的方法来切换内容，并且由于您使用的是jquery，请使用它来处理点击事件，而不是使用onclick，这应该非常容易，请阅读关于它。

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

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

1 个答案: