Javascript 如何在JQuery中重复同一段代码，并在每段代码上附加不同的编号？

我遇到了一些问题，无法将PHP代码动态创建的元素作为目标。我想做的是切换（）元素。这是数据库中最新空缺的新闻提要

我成功地实现了这一点，但手动编写jquery代码来针对如下元素，效率非常低：

  $('#clickMe1').click(function(event){
    event.preventDefault();
    $('#targetCollapse1').toggle();
    if ($('#targetCollapse1').is(":visible"))
    {
      $('#change-icon1').removeClass('fa-plus').addClass('fa-minus');
    }
    else
    {
      $('#change-icon1').addClass('fa-plus').removeClass('fa-minus');
    }
  });
  $('#clickMe2').click(function(event){
    event.preventDefault();
    $('#targetCollapse2').toggle();
    if ($('#targetCollapse2').is(":visible"))
    {
      $('#change-icon2').removeClass('fa-plus').addClass('fa-minus');
    }
    else
    {
      $('#change-icon2').addClass('fa-plus').removeClass('fa-minus');
    }
  });

如何只制作此代码的一部分并申请1-5之间的数字。我尝试了一个for循环，但仍然没有成功？？？

下面是html/php代码，以了解那里发生了什么。顺便说一句，我正在使用CodeIgniter和解析类，所以{dispensions}{/dispensions}是一个for循环

<ul class="vacancies">
  {vacancies}
    <a href="#" id="clickMe{num}">
    <li>
      <i class="fa fa-plus" id="change-icon{num}"></i><i class="fa fa-code"></i><span class="job-title">{job_title}</span>
      <span class="job-pubdate">{pubdate}</span>
      <div class="description" id="targetCollapse{num}">{job_descr}</div>
    </li>
    </a>
  {/vacancies}
</ul>

{空缺}
{/空缺}

试试这个：

 $('[id^=clickMe]').click(function(event){
    event.preventDefault();
    var number=$(this).attr('id').substr($(this).attr('id').length-1); //get the number at the end of the id
    $('#targetCollapse'+number).toggle();
    if ($('#targetCollapse'+number).is(":visible"))
    {
      $('#change-icon'+number).removeClass('fa-plus').addClass('fa-minus');
    }
    else
    {
      $('#change-icon'+number).addClass('fa-plus').removeClass('fa-minus');
    }
  });

更新：

---

此行

var number=$（this.attr（'id'）.substr（$（this.attr（'id'））.length-1）获取单击元素的
id
属性，然后获取它的最后一个字符（使用），并将其存储在一个名为
number
的变量中滥用HTML元素id不是一个好习惯（但也没有坏处）

您可以在事件处理程序中使用
this
来标识触发事件的元素。为了找到里面的元素，jQuery提供了
子类
方法

这是我的解决方案

在模板中：

<ul class="vacancies" id="vacancies">
    <li>
          <a href="#" data-id="{num}">
              <i class="fa fa-plus change-icon"></i>
              <i class="fa fa-code"></i><span class="job-title">{job_title}</span>
              <span class="job-pubdate">{pubdate}</span>
              <div class="description">{job_descr}</div>
          </a>
    </li>
</ul>

试试这个

$('[id^='clickMe').click(function(event){
event.preventDefault()
var i = this.id.replace('clickMe','');
$('#targetCollapse' + i).toggle();
if ($('#targetCollapse' + i).is(":visible"))
{
  $('#change-icon' + i).removeClass('fa-plus').addClass('fa-minus');
}
else
{
  $('#change-icon' + i).addClass('fa-plus').removeClass('fa-minus');
}

}))
 在每个元素上附加一些id，然后在事件处理程序中使用
this
来识别触发事件的元素。您使用这些丑陋的
clickMe{num}
对象而不是类有什么原因吗？它起作用了，但您能解释一下这行代码吗：var number=$（this.attr（'id'）.substr（$（this.attr（'id'）.length-1）；它到底在做什么@阿明Jafari@Unsparing很抱歉，我错误地掉了一对括号。是的，我修复了这个问题，并将$（'cacanice'）更改为$（'cacanice'），因为这也是错误的，但仍然不起作用。var num在代码中的任何地方都没有使用，它是这样的吗？如果不使用数据id，为什么需要它？也许这就是它不起作用的原因@ChiChou@Unsparing最后我意识到这些元素不是兄弟。它们在里面，所以我必须使用
子对象
。现在能用了吗？还是不行（如果它能工作，它看起来真的是最有效的代码。我在JSFIDLE上测试了它，但是如果没有实际的后端环境，我就无法找出问题所在(
$('[id^='clickMe').click(function(event){
event.preventDefault()
var i = this.id.replace('clickMe','');
$('#targetCollapse' + i).toggle();
if ($('#targetCollapse' + i).is(":visible"))
{
  $('#change-icon' + i).removeClass('fa-plus').addClass('fa-minus');
}
else
{
  $('#change-icon' + i).addClass('fa-plus').removeClass('fa-minus');
}