Question

我使用PHP生成独特的div。以下是我的HTML代码示例：

<div id="wrapper">
  <div id="team-member-1"><img src="/theimage1.jpg" /></div>
  <div id="team-member-bio-1"><p>The team member's biography.</p></div>

  <div id="team-member-2"><img src="/theimage2.jpg" /></div>
  <div id="team-member-bio-2"><p>The team member's biography.</p></div>

  <div id="team-member-3"><img src="/theimage3.jpg" /></div>
  <div id="team-member-bio-3"><p>The team member's biography.</p></div>
</div>

每个div id末尾的数字是PHP计数器生成的数字。我想用jQuery做的是在点击div“team-member-1”时显示“team-member-bio-1”，当div“团队成员”时显示“team-member-bio-2”点击了-2“等等。我知道我可以用一堆if else语句做到这一点，但我知道这不是最有效的方式;我在页面上有大约36名团队成员。我以为我可以使用计数器并将jQuery计数器生成的数字添加到每个div名称的第一部分。作为jQuery的新手，我有点不确定格式化所有内容以使其工作的最佳方式。

如果您需要我提供任何其他信息，请与我们联系。谢谢！

Answer 1

如果您需要使用现有代码，可以使用通用选择器并解析ID。

$('div[id^=team-member-]').click(function(){
    thisId = $(this).attr('id');
    bioId = thisId.substring(thisId.lastIndexOf('-')+1);
    var bioElement = $('#team-member-bio-'+bioId); // your bio div
});

请参阅此jsFiddle。

然而，执行此操作的正确方法是使用数据属性，例如data-bioid="1"，并且您应该有一个jQuery的公共类来绑定click（）甚至是class="team-member"，像这样：

<div id="wrapper">
  <div id="team-member-1" class="team-member" data-bioid="1"><img src="/theimage1.jpg" /></div>
  <div id="team-member-bio-1"><p>The team member's biography.</p></div>
</div>

然后，您可以查找这些类中的任何一个，并使用成员bio执行某些操作：

$('.team_member').click(function(){
    bioId = $(this).data('bioid');   // the value of data-bio attribute
    var bioElement = $('#team-member-bio-'+bioId); // your bio div
});

Answer 2

$('div[id^=team-member-]').click(function()
{
  $(this).next().first().css('display','block'); 
});

Answer 3

这是javascript中刺痛的最后一部分

  id.substring(id.lastIndexOf('-')+1)   

  //split also works here
  var num = id.split("-")
  var newID  = "team-member-" + ((num[2] *1) + 1)

所以也许在每个想要点击的div上添加一个类

<div id="wrapper">
  <div id="team-member-1" class="clickable"><img src="/theimage1.jpg" /></div>
  <div id="team-member-bio-1"><p>The team member's biography.</p></div>


$(function(){
   $('.clickable').click(function(){
     var id = $(this).attr('id');
     var lastChar = id.substring(id.lastIndexOf('-')+1)
     nextid = "team-member-" + ((lastchar * 1) + 1) 
    $('#' + nextid ).show();
 });
});

编辑：其他答案激励我为你制作另一个解决方案，这应该与更少的代码一样好用

$('div[id^=team-member-]').click(function()
{
  $(this).next($('div[id^=team-member-]')).show() 
});

- 如果有任何生物div，多个生物div或其他任何东西并不重要

Answer 4

您可以使用图片标记作为键来查找当前点击的div。使用has()选择具有图片标记的特定元素。

  $('div[id*="team-member-"]:has(img)').click(function(){
        $(this).next().show('slow');
  });

Live demo

使用计数器单击DIV-1时显示DIV-sub-1

4 个答案: