jQuery-函数中的变量字符串

我的html包含许多这样的行：

<a href="#" id="car_small">Car 1</a>
<a href="#" id="car_big">Car 2</a>
<a href="#" id="wheels_small">Wheels 1</a>
<a href="#" id="wheels_big">Wheels 2</a>

---

这正以我希望的方式工作，但我需要为每个链接复制并粘贴此代码。

您可以使用选择器尝试endswith：

$('a[id$="_small"]')

编辑：然后你可以做两件事中的一件来获得最大的一件：

如果顺序正确，请使用

.next（）

，或者您可以获取所选

标记的id并将其子串以获取第一部分，然后将其与_big一起传递给选择器

$('a[id$="_small"]').click(function(e){
    e.preventDefault();
    var type = $(this).attr('id').split('_', 2)[0];
    $('#'+type+'_big').slideUp('fast');
});

---

这就是解决这个问题的方法。

您可以使用regexp来扩展代码

$('a').click(function() {
  var matches=/(\w+)_small/.exec($(this).attr('id'));
  if(matches.length){
    $('#'+matches[1]+'_big').slideUp('fast', function() { });  }
 });

---

稍微更改标记：

<a href='#' class='sizeable' data-type='car' data-size='small'>Car 1</a>
<a href='#' class='sizeable' data-type='car' data-size='large'>Car 2</a>
<a href='#' class='sizeable' data-type='wheel' data-size='small'>Wheel 1</a>
<a href='#' class='sizeable' data-type='wheel' data-size='large'>Wheel 2</a>

---

这样做的另一个好处是使标记具有意义，而不是指定具有多种意义的ID（这破坏了语义标记的概念）。

我不确定是否在此处使用

split（）

；如果id是“消音器皮带小”，那么您最终会得到

$（“#消音器大”）…

。这正是我想要的-小的，单行代码！非常感谢你。完美

$('a').click(function() {
  var matches=/(\w+)_small/.exec($(this).attr('id'));
  if(matches.length){
    $('#'+matches[1]+'_big').slideUp('fast', function() { });  }
 });

<a href='#' class='sizeable' data-type='car' data-size='small'>Car 1</a>
<a href='#' class='sizeable' data-type='car' data-size='large'>Car 2</a>
<a href='#' class='sizeable' data-type='wheel' data-size='small'>Wheel 1</a>
<a href='#' class='sizeable' data-type='wheel' data-size='large'>Wheel 2</a>

$('.sizable').click(function(){
    var $this = $(this);
    var type = $this.data('type');
    var size = $this.data('size');

    $('.sizeable[data-type="'+type+'"][data-size="large"]').slideUp('fast');
});