-
ID:q7GJBu さんの質問

下記のような機能を持った、用語説明のページを作りたいと思っています。

  • 用語名をクリックするとその用語の説明が表示され、他の用語の説明が既に表示されていた場合は、その説明を非表示にする。(常に表示される説明は一つだけとなる)
  • 現在説明が表示されている用語の用語名をクリックすると、説明が非表示になる。(同じ用語の押下を繰り返すと、表示→非表示→表示…となる)

色々調べた結果下記のようなコードを見つけ、解読しながら実装しているのですが、★印の行(ifの条件式中のi)についていまいち理解できません。なんとなく、「現在押されている用語名と別の用語名が押された場合」を判定しているのかとは思うのですが、別の用語が押された場合をシミュレーションしてみても、iの変化の流れがよくわからず、どういう流れでcとiが一致しない場合が発生するのかが理解できずにいます。

Firebugなどで確認しようと思いましたがなかなかうまくいかなかったため、こちらで質問させていただきました。

$(function(){
var clickBtn = [’.btn’]; //dt要素(用語名)
var ac_detail = [’.detail’]; //dd要素(用語の説明)
var Speed ="normal"
var openTypeOne = true;

$(clickBtn).each(function(i) {

$(clickBtn[i]).css({"cursor":"pointer"});
$(ac_detail[i]).hide();

$(clickBtn[i]).click(function(){
index = $(clickBtn[i]).index(this);
if(openTypeOne==true){
accordion_one(clickBtn[i],ac_detail[i],index,i);
}
else{
accordion(clickBtn[i],ac_detail[i],index,i);
}
});
});

//--accordion_one関数----------------------------------------//

function accordion_one(a,b,c,d){

$(a).each(function(i) {

★if(c!=i){
if($(a).eq(i).hasClass(’clickBtn_on’+d)){
$(a).removeClass(’clickBtn_on’+d);
$(b).eq(i).slideUp(Speed);
  $(b).eq(i).fadeOut(800);
}
}
});

if ($(a).eq(c).hasClass(’clickBtn_on’+d)) {
$(a).removeClass("clickBtn_on"+d);
$(b).eq(c).slideUp(Speed);
$(b).eq(c).fadeOut(800);
}
else{
$(a).eq(c).addClass(’clickBtn_on’+d);
$(b).eq(c).fadeIn(800);
$(b).eq(c).slideDown(Speed);
}
}

長々とすみませんが、よろしくお願いします。

みんなの回答 3 件

ID:UD4JEg さんの回答

下記のようなjQueryを使おうとしているのですが、function(i)の「i」とは何でしょうか?初歩的な質問かと思うのですが...

http://w3q.jp/t/4706
ID:q7GJBu

ありがとうございます。
firequeryで確認ができたため、iの件は解決しました。

ID:q7GJBu さんの回答

新たな疑問がでてきたのですが、
accordion_one関数で受け取る「d」は何故必要なのでしょうか?

ID:2uTA/G

上でdにはiを受け取ってるでしょ。
上でfirequery使ってるって書いてるし、もうちょっとDOM解析してみたら?

ID:q7GJBu

ありがとうございます。
色々なタイミングでdの値を表示させてみたりしているのですが、どんな場合も0になり、dを削除して動作させても確認した限りでは何も変わりませんでした。
ボタンが押されているかどうかを判断するためのものだと思うので、それなら’clickBtn’だけでも良いのではないかと思ってしまいます…
根本的に理解できていない部分があると思うので、もう少し解析などしてみます。

ID:rorYVz さんの回答

腰を折って悪いけど、おおまかな実装はcssだけでできるんじゃないかな。

<ul>
 <li>
  <label for="desc1">用語1</label>
  <input class="view" type="radio" id="desc1" name="desc">
  <p>用語1の説明</p>
 </li>
 <li>
  <label for="desc2">用語2</label>
  <input class="view" type="radio" id="desc2" name="desc">
  <p>用語2の説明</p>
 </li>
</ul>

input,p{
 display:none;
}
.view:checked+p{
 display:block;
}

長くなるので全部は書かないけど、表示・非表示を繰り返すところも少し工夫すればできるよ。がんばって。

ID:q7GJBu

ありがとうございます!
cssだけでできればその方が良さそうですね。色々考えてみます。

最終更新日:2013-10-24 (2,209 views)

関連するトピックス

ページ上部に戻る