0

我正在使用 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”时显示“team-member-bio-2” -2" 被点击，等等。我知道我可以用一堆 if else 语句来做到这一点，但我知道这不是最有效的方法；我在页面上有大约 36 名团队成员。我在想我可以使用一个计数器并将 jQuery 计数器生成的数字添加到每个 div 名称的第一部分。作为 jQuery 的新手，我有点不确定格式化所有内容以使其正常工作的最佳方式。

如果您需要我提供任何其他信息，请告诉我。谢谢！

4

4 回答 4

0

如果您需要使用现有代码，可以使用通用选择器并解析出 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"and，您应该有一个通用类供 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>

然后，您可以点击这些课程中的任何一个，并对成员简介进行一些操作：

$('.team_member').click(function(){
    bioId = $(this).data('bioid');   // the value of data-bio attribute
    var bioElement = $('#team-member-bio-'+bioId); // your bio div
});
于 2012-11-06T00:41:58.087 回答
0 
$('div[id^=team-member-]').click(function()
{
  $(this).next().first().css('display','block'); 
});
于 2012-11-06T00:42:38.447 回答
0

这得到了 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() 
});

- 这里是否有任何 bio div 、多个 bio div 或其他任何东西都没有关系

于 2012-11-06T00:44:02.540 回答
0

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

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

现场演示

于 2012-11-06T04:04:21.410 回答