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の共通クラスを使用して、次class="team-member"のように、click（）をなどにバインドする必要があります。

<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 に答える