javascript - 如何在 JQuery 中重复相同的代码，并为每个代码附加不同的编号？

Question

我在定位由 PHP 代码动态创建的元素时遇到问题。我想做的是toggle() 元素。这是数据库中最新职位空缺的新闻源。

我让它工作了，但是通过手动编写一段 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 和解析类，因此 {vacancies} {/vacancies} 是一个 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>

Answer 1

试试这个:

 $('[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 属性，然后获取它的最后一个字符(使用 substr() )并将其存储在名为 number

的变量中