Question

我有这段代码用于语言切换：

function toggleDiv(divid) {  
varon = divid + 'on';
varoff = divid + 'off';
      if(document.getElementById(varon).style.display == 'block'){
      document.getElementById(varon).style.display = 'none';
      document.getElementById(varoff).style.display = 'block';
      }
        else {  
            document.getElementById(varoff).style.display = 'none';
            document.getElementById(varon).style.display = 'block'
        }
}

和HTML：

<div id="mydivon" style="display:block">some language text</div>
<div id="mydivoff" style="display:none">some other language text</div>
 <a href="#" onmousedown="toggleDiv('mydiv');">Language1/Language2</a>

我希望切换按钮可切换，当选择一个Language1时，将切换文本切换到Language2，反之亦然。一些指针会受到欢迎。 THX

Answer 1

我已经设置了 Fiddle ，这是您想要实现的效果吗？正如@Shilly在评论中已经说过的那样，您可以使用textContent来更改锚标记的内容。

我已经为您的主播#languageSwitch分配了一个ID，因此我可以在您的JS中执行以下操作

<强> HTML

<div id="mydivon" style="display:block">
    Language 1 is selected
</div>
<div id="mydivoff" style="display:none">
    Language 2 is selected
</div>
<a id="languageSwitch" href="#" onmousedown="toggleDiv('mydiv');">
    Switch to Language2
</a>

<强> JS

function toggleDiv(divid) {
    varon = divid + 'on';
    varoff = divid + 'off';
    // Assign the switch anchor to a variable
    var switcher = document.getElementById('languageSwitch');
    if (document.getElementById(varon).style.display == 'block') {
        document.getElementById(varon).style.display = 'none';
        document.getElementById(varoff).style.display = 'block';
        //Change the text to language1 (language 2 is active)
        switcher.textContent = "Switch to Language1";
    } else {
        document.getElementById(varoff).style.display = 'none';
        document.getElementById(varon).style.display = 'block'
        //Change the text to language2 (language 1 is active)
        switcher.textContent = "Switch to Language2";
    }
}

Answer 2

第1步：在您的链接中添加ID：

<a id="toggle-language" href="#" onmousedown="toggleDiv('mydiv');">Language1/Language2</a>

第2步：将您的功能更改为：

function toggleDiv(divid) {  
    var on = document.getElementById(divid + 'on'),
        off = document.getElementById(divid + 'off'),
        language = document.getElementById('toggle-language');
    if (on.style.display == 'block'){
        on.style.display = 'none';
        off.style.display = 'block';
        language.textContent = 'Language 2';
    }
    else {  
        on.style.display = 'block';
        off.style.display = 'none';
        language.textContent = 'Language 1';
    }
}

Answer 3

如评论中的OP所述：

目前您正在显示一个元素，但是切换本身并没有改变语言。

现在你可以做的就是当你mousedown并执行toggleDiv(divid)时应该有一个特殊的变量叫做this

this基本上意味着＆＃34;这叫我＆＃34;以最简单的形式。在您的情况下，this是<a href="#">Language1/Language2</a>链接

那么你可以在你的功能中做些什么：

function toggleDiv(divId) {
    //also highly recommend you cache your variables
    varon = document.getElementById(divId + 'on');
    varoff = document.getElementById(divId + 'off');

    if (varon.style.display == 'block') {
        varon.style.display == 'none';
        varoff.style.display = 'block';
        this.innerHTML = varoff.innerHTML; // <- selected element value injected in bound button
    } else
        varon.style.display == 'block';
        varoff.style.display = 'none';
        this.innerHTML = varon.innerHTML; // <- selected element value injected in bound button
}

使用行this.innerHTML = varon/off.innerHTML，你会说，＆＃34;调用我的元素必须具有块元素的值＆＃34;

该值仍然默认为Language1/Language2，但只要您更改它就会更新。

希望它有所帮助！

注意：UNTESTED

javascript更改切换按钮文本

3 个答案: