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()）并将其存储在名为{{的变量中1}}

Answer 2

滥用HTML元素id不是一个好习惯（但它不会造成伤害）。

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

所以这是我的解决方案。

在你的模板中：

<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>

在你的javascript中：

$('#vacancies').on('click', 'a', function(event) {
    // var num = $(this).attr('data-id');
    // {num} in template, but it seems useless in this case

    var $desc = $(this).children('.description'),
        $icon = $(this).children('.change-icon');

    // you can use children to locate children elements, no need to assign id
    $desc.toggle(); // toggle visibility
    if ($desc.is(':visible')) {
        $icon.removeClass('fa-plus').addClass('fa-minus');
    } else {
        $icon.removeClass('fa-minus').addClass('fa-plus');
    }

    /*
       or simply use toggleClass
       $icon.toggleClass('fa-minus').toggleClass('fa-plus');
    */
    event.preventDefault();
});

Answer 3

试试这个......

$('[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');
}

}）;

如何在JQuery中重复相同的代码片段，每个代码附加不同的编号？

3 个答案: