冷凝Jquery更清洁

时间:2018-01-25 20:59:35

标签: javascript jquery html css

我尝试从另一个故事中实现这个并且它不起作用......我尝试做类似的事情。

Condensing Javascript/jQuery Code

我不知道它是否仍然有效。

我正在尝试转换

$("#coll-1").click(function(){
    $(".coll-1").stop().slideToggle();
    return false;
});

$("#coll-2").click(function(){
    $(".coll-2").stop().slideToggle();
    return false;
});

进入这个

$('[id^="coll-"]').click(function(){
    alert("This works?");
    $(this).find('[class^="coll-"]').stop().slideToggle();
    return false;
});

<div class="col-xs-12 col-sm-2 cwrap nursel">
  <span class="colour"></span>
  <div class="card card-block">

<hr/>

<div class="col-xs-12 nill">
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur.
      <span class="coll-2">
      Maecenas mattis purus nunc, et molestie risus porttitor a. Phasellus ex lacus, viverra sed tempus at, cursus quis tortor. Cras tempor mollis.
      </span>
    </p>
</div>

<div class="col-xs-12 nill mar_bott">
<a id="coll-2" href="" class="">Show more  <span class="indicator glyphicon glyphicon-plus"></span></a>
</div>

  </div>
</div>

到目前为止它还没有用。

2 个答案:

答案 0 :(得分:1)

您不应该在$(this)中搜索。只需获取当前元素的ID,并将其转换为类选择器。

$("[id^=coll-]").click(function(e) {
    e.preventDefault();
    var theClass = this.id;
    $("." + theClass).stop().slideToggle();
});

答案 1 :(得分:0)

如果您只是想“减少”原始代码,可以这样做:

$("#col1, #col2").click(function(){
  $(this).stop().slideToggle();
  return false;
});