在JQuery中显示和隐藏对象

我想根据某些条件显示和隐藏对象（div，文本或btns）。在JQuery中显示和隐藏对象

在C＃中，我们可以写出像下面的减少值编码量：

txtA.visible = (type == "A"); 
txtB.visible = (type == "B"); 
txtC.visible = (type == "C");

jQuery中，以显示和隐藏，我用.show（）和.hide（）方法。但是，我必须为这个简单的功能写很多行。例如：

if (type == "A") 
    $("#txtA").show(); 
else 
    $("#txtA").hide(); 

if (type == "B") 
    $("#txtB").show(); 
else 
    $("#txtB").hide(); 

if (type == "C") 
    $("#txtC").show(); 
else 
    $("#txtC").hide();

有没有办法用较少的线路实现相同的功能？谢谢。

来源

2011-06-08 TTCG

.toggle(showOrHide)允许一个布尔以显示或隐藏的元素。

你可以重写你的榜样看起来像这样：

$("#txtA").toggle(type === "A"); 
$("#txtB").toggle(type === "B"); 
$("#txtC").toggle(type === "C");

Example on jsfiddle

来源

2011-06-08 14:42:40

看看JQuery toggle！

来源

2011-06-08 14:36:38 ArtoAle

我认为这不会减少在这种情况下代码大小，因为反复被有条件地发生。 – 2011-06-08 14:39:25

使用三元运算：

(type == "A") ? $("#txtA").show() : $("#txtA").hide();

来源

2011-06-08 14:38:29 noinstance

当你有很多元素时，我不明白这会如何减少代码量，它只是在一行上添加条件。 if（type ==“A”）$（“＃txtA”）。show（）;其他$（“＃txtA”）。hide（）'几乎一样短。 – 2011-06-08 14:51:22

@Gary Green - 我更喜欢你的解决方案 – noinstance 2011-06-08 14:54:12

这将显示当前的类型和隐藏所有的兄弟姐妹元素（我假设他们被放置在一个容器内）

// Remember ids are case sensitive 
var type = 'A'; 

$('#txt' + type).show() // Show the current type 
    .siblings().hide(); // Hide all other elements

小提琴：http://jsfiddle.net/garreh/4JkGm/

如果你的兄弟元素不总是你想要隐藏的类型，只需在它上面添加一个过滤器：

$('#txt' + type) 
    .show() // Show the current type 
    .siblings() 
    .filter(function() { 
     return (this.id.match(/^txt[A-C]$/)) 
    }).hide(); // Hide all other elements

小提琴：http://jsfiddle.net/garreh/4JkGm/1/

来源

2011-06-08 14:40:47

在JQuery中显示和隐藏对象

回答

相关问题