Question

如何基于我上载的字符串切换显示块或无？

如果我的HTML如下

<ul id="test1,test2" style="display:none;"> 
<li><a href="#" onclick="myfunction('users')">My Link</a></li> 
</ul>

<ul id="abc1,abc2" style="display:none;"> 
<li><a href="#" onclick="myfunction('users')">My Link</a></li> 
</ul>

是否可以使用class =＆＃34; test1 test2＆＃34;并基于此我可以获得ul id并切换它？如果id不能有多个值。

我将获得文本test1或abc2或abc1。我想在这个文本上找到这个ul，我想把它设置为显示：块请帮我这个

Answer 1

您不能在ID标记

中用逗号分隔多个ID

<ul id="test1,test2" style="display:none;"> 
<li><a href="#" onclick="myfunction('users')">My Link</a></li> 
</ul>

<ul id="abc1,abc2" style="display:none;"> 
<li><a href="#" onclick="myfunction('users')">My Link</a></li> 
</ul>

id只能有一个值。 ID不是具有多个值的类。那也用逗号

因此，一旦您使用多个类名修改代码，如下所示

<ul class="test1 test2" style="display:none;"> 
<li><a href="#" onclick="myfunction('users')">My Link</a></li> 
</ul>

<ul class="abc1 abc2" style="display:none;"> 
<li><a href="#" onclick="myfunction('users')">My Link</a></li> 
</ul>

如果你已经知道了类名：

    $("ul.test1.test2").show();

将以上行添加到您的点击处理程序中，或者如果您想在onload中添加

$(function() {
       $("ul.test1.test2").show();
})

<强> DEMO

Answer 2

使用逗号分隔ID并不是一种好习惯 - 甚至是非法的 - 改为使用空格的类而不是

$(function() {
  var text = "abc1"; // passed somehow
  $("."+text).show();
});

如果你想拥有一个可以在以后使用的功能，试试这将隐藏所有的UL并显示带有传递的className的那个

function toggleULs(text) {
  $("ul").hide(); // or other selector
  $("."+text).show();
}

$(function() {
  var text = "abc1"; // passed somehow
  toggleULs(text); 
});

Answer 3

根据我对这个问题的理解，我创造了一个提供我解决方案的小提琴。请查看小提琴here。我希望它有所帮助。

var toggleShowHide=function(classname){
    $('.'+classname).toggle();
};

toggleShowHide('abc1');

Answer 4

您的HTML：

<ul id="test1,test2" style="display:none;"> 
<li><a href="#" onclick="myfunction('users')">My Link</a></li> 
</ul>

<ul id="abc1,abc2" style="display:none;"> 
<li><a href="#" onclick="myfunction('users')">My Link</a></li> 
</ul>

不正确，根据W3c HTML4 documentation ID属性中允许使用以下字符。

ID和NAME令牌必须以字母（[A-Za-z]）开头，可能是后跟任意数量的字母，数字（[0-9]），连字符（＆＃34; - ＆＃34;），下划线（＆＃34; _＆＃34;），冒号（＆＃34;：＆＃34;）和句号（＆＃34;。＆＃34;）。

你的问题：

是否可以使用class =＆＃34; test1 test2＆＃34;并基于此我可以获得ul id并切换它？如果id不能有多个值。

是的，您可以指定多个班级。但是不要使用逗号分隔两个类，而不是使用逗号使用space分隔两个类

试试这个：

HTML：

 <ul id="firstUL" class="test1 test2" style="display:none;"> 
    <li><a href="#" onclick="myfunction('users')">My Link 1</a></li> 
    </ul>

    <ul id="secondUL" class="abc1 abc2" style="display:none;"> 
    <li><a href="#" onclick="myfunction('users')">My Link 2</a></li> 
    </ul>

<ul id="thirdUL" class="another1 another2" style="display:none;"> 
    <li><a href="#" onclick="myfunction('users')">My Link 3</a></li> 
    </ul>

Jquery：

$('ul.abc1.abc2, ul.test1.test2').show();

Working Example

Example With toggle

Answer 5

<ul id="test1" style="display:none;"> // it is not good practice to have 2 id value. 
   <li><a href="#">My Link</a></li> 
</ul>


  var ulID = $("ul").attr("id"); // get the ID of ul on page load

        if($("#" + ulID).css("display", "none")) // check the status of ID and open accordingly
            {
                $("#" + ulID).css("display", "block"); 
            }
        else
            {
                 $("#" + ulID).css("display", "none");
            }

隐藏并显示基于id的ul

5 个答案: