Question

我有一系列需要定位的课程，并希望得到一些指导

必须有一种更好的编码方式，而不是放入所有的类和逗号......

$(".btn01").click(function() {
$('#box01').fadeIn();
$('#box02,#box03,#box04,#box05,#box06,#box07,#box08,#box09').hide();
});

$(".btn02").click(function() {
$('#box02').fadeIn();
$('#box01,#box03,#box04,#box05,#box06,#box07,#box08,#box09').hide();
});

$(".btn03").click(function() {
$('#box03').fadeIn();
$('#box01,#box02,#box04,#box05,#box06,#box07,#box08,#box09').hide();
});

谢谢你提前人

Answer 1

您可以使用带有选择器^

的开头

$('[id^=box]');

将一切结合起来会给：

$('[class^=btn]').click(function(e){
   $('[id^=box]').hide(); // hide everything
   $('#box'+e.target.className.match(/\d+$/)[0]).fadeIn();  // show only this
});

如评论中所述，使用类而不是ID会更好。

Answer 2

您可以使用“not”排除特定ID：

$(".btn03").click(function() {
  $('#box03').fadeIn();
  $('[id^=box]').not('#box03').hide();
});

Answer 3

我认为，这可以是一种更简单的方法来做你想做的事情

Jquery Selector [id ^ = box] 选择 id 属性值的所有元素，以“box”开头

<强>代码：

$(".btn01").click(function() { 
$("[id^='box']").hide();
$('#box1').show();    
});

示例： http://jsfiddle.net/hsakapandit/3r7WA/

Answer 4

请这样做， GENERIC STYLE

__-----> JSFIDDLE LINK <-----__
说你有你的HTML，你的按钮看起来像这样。

<input type='button' value='Click Me!' class='btnClass'/>

然后，对于每个具有特殊框的按钮，它应该显示，您添加一些自定义数据属性。

<input type='button' value='Click Me!' class='btnClass' c-data-attr-boxid='box1'/>

你的盒子也需要一些课程。

<div id='box1' class='boxes'></div>

然后在你的Javascript / Jquery中你会做这样的事情。

$(".btnClass").click(function(){
     var id = this.attr('c-data-attr-boxid');
     $(".boxes").hide();
     $("#"+id).show();
});

jQuery - 选择除一个类之外的一系列类

4 个答案: