如何同步两个重叠的JavaScript onclick事件 [英] How to synchronise two overlapping JavaScript onclick events

问题描述

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

我的网站有两个层":

1. 语言界面层(英语和法语)，用户可以使用其首选语言浏览网站.这将围绕网站内容:

1. a language interface layer (English and French) where users can navigate the site in their preferred language. This wraps around the site content:

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

a content layer, where the user can view a selected Latin document in one of two formats: Interpretive or Diplomatic.

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

The language selection is controlled by the user clicking on:

<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有关:

Which relates to javascript:

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

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

拉丁视图选择更成问题，因为我需要在标题的语言/文档视图选择之间进行切换.

The Latin view selection is more of a problem, because I need to toggle between language/document view selections for the title.

我在标题上有四种可能的标题变体，其中 diplo =外交的和 inter =解释性的

I have four possible title variations on title, where diplo= diplomatic and inter = interpretive

<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> ，其中包含不同拉丁格式的文本:

And then two related <div> containing the text in different Latin formats:

<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 之间切换的两个链接:

Two links for toggling between views diplo and 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有关:

Which relates to javascript:

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

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

以上所有内容的启动css:

The initiating css for all of the above:

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

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

问题在于切换diplo/inter与en/fr会发生冲突.但是我不确定如何解决这个问题.

The problem is that toggling diplo / inter conflicts with en / fr. But I'm not sure how to solve this.

谢谢.

推荐答案

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

here is the fiddle modified, does it accomplish what you want?

这是一个示例

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

what I did is that I added a variable to hold the language class name and in the view diplomat/inter I appended that variable to the CSS selector.

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

I also added the format to the state to track the format if the language changes to stay on the same format.

代替:

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

我添加了:

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

其中:

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

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

and when the user changes the language we set the language in the state and in showFR/EN we check the format to keep the user choice.

话虽这么说，您没有利用jquery的功能，但是有更好的方法来切换内容，并且由于您使用的是jquery，请使用它来处理click事件，而不要使用 onclick 容易，了解一下.

that being said, you are not utilizing jquery power, there are better way to toggle stuff and since you are using jquery please use it to handle the click events instead of using onclick it should be very easy, read about it.

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

Disclaimer: The code in the fiddle can be cleaned up and improved I'm just trying to show the idea

这篇关于如何同步两个重叠的JavaScript onclick事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！