如何将包含另一个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和类都已在css中设置为display:none;。

在JavaScript中，我希望togfullspace函数在单击"nord“和"Hi”时显示"Hello“，当我单击”div“时，如果其中一个div是可见的，我希望JS在显示单击的div之前隐藏它。这是我的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上的一个工作示例。

Answer 2

根据HTML5 规格说明，您不能有多个具有相同id的元素。

换句话说，$('#level').is(':hidden')只检查第一个div。

我的建议是:使用公共类来表示级别，而不是ids：

<div class="level unord">Hello</div>
<div class="level ucenter">Hi</div>

Answer 3

HTML：

<span data-cor="div1">div 1</span>
<div class="div1">this is div 1</div>

jQuery：

$('span').on('click',function(){
    $('.'+$(this).data('cor')).toggleClass('hidden');
    // or use slideToggle instead
});

代码不只是为了例如目的而进行测试。

其他选项是获取元素索引，但两者相对于其父元素应该具有相同的索引。这两种元素都是不同的。