javascript更改切换按钮文本

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，反之亦然。 一些指针将是受欢迎的。 谢谢

Answer 1

我已经设置了小提琴 ，这是您想要达到的效果吗？ 正如@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在评论中所述：

当前，您正在显示一个元素，该元素是否已被选中，但切换开关本身并没有改变语言。

现在您可以做的是，当您按下鼠标并执行toggleDiv(divid) ，应该有一个特殊的变量称为this

this基本上就是最简单形式的“这叫我”。 对于您而言， 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您要说的是，“调用我的元素必须具有block元素的值”

该值仍将默认为Language1/Language2但更改后它将立即更新。

希望能帮助到你！

注意：未测试