javascript - 如何将包含另一个div的类的变量传递给JS函数并使用它来显示/隐藏相应的div？

Question

我已经设置了这个 html 代码来使用:

<span  onclick="togfullspace('unord')">nord</span>
<span onclick="togfullspace('ucenter')">centro</span>
</br>
<div id = "level" class="unord">Hello</div>
<div id="level" class="ucenter">Hi</div>

id 和 class 都已在 css 中设置为 display:none;

在 JavaScript 中我想要函数 togfullspace当我点击“nord”时显示“Hello”，当我点击“centro”时显示“Hi”，如果 div 之一s 已经可见，我希望 JS 在显示单击的之前隐藏它。这是我的 JS 代码:

jQuery(function ($) {
    $(document).click(function togfullspace(classe) {
        var idclass = '#level.' + classe;

        if (!$('#level').is(':hidden')) {
            $('#level').hide();
        } else {
            if ($(idclass).is(':hidden')) {

                $(idclass).show();

            } else {

                $(idclass).hide();

            }
        }
    });
});

如果，而不是使用变量idclass ，我用"#level.unord"它有效(仅适用于 <div class="unord"> )，所以我猜我在这里处理变量的方式有问题。任何帮助将不胜感激，谢谢。

Answer 1

我编辑了您的代码以对其进行一些清理，但只需稍作修改即可使用:

HTML:

<span class="clickable">unord</span>
<span class="clickable">ucenter</span>
</br>
<div class="level" id="unord">Hello</div>
<div class="level" id="ucenter">Hi</div>

jQuery:

$(".clickable").click(function(){
    var id = "#" + $(this).text();
    alert($(id).text());
    $(".level").hide();
    if ($(id).is(':hidden')) {
        $(id).show();
    } else {
        $(id).hide();
    }
});

这是 JSFiddle.net 的一个工作示例.