$（）セレクターの値を変更してコンテンツを再読み込みせずに使用する方法

Question

それぞれの.cont [i] onclickedに対して非表示のp [i]を表示したいと思います。各イベントは1回しか表示されません。

HTML構造：

$(document).ready(function() { 
    $("p").hide(); 
    currentItem = 0; 
    currentCont = ".cont" + currentItem.toString(); 
    mArrayList = ["a", "b", "c"]; 
    currentArrayElement = mArrayList[currentItem]; 

    $(currentCont).on("click", function(){ 
    $(currentCont + " p").fadeIn(3000).html(currentArrayElement); 
    currentItem+=1; 
    }); 
}); 

が、予想通り第一oncklickた後、それが.cont1見つけることができません（：私はこのようなものを使用する方が良いだろうと思った。この目的のために

<div class="cont0"> 
    <p></p> 
</div> 
<div class="cont1"> 
    <p></p> 
</div> 
<div class="cont2"> 
    <p></p> 
</div> 

私のために）.. 私がここで見つけたものは1つだけです - 関数外の変数を再定義するために、私はこれを試しました：

nextCurrentItem = function nextCurrentItem() { 
    currentItem += 1; 
    currentArrayElement = mArrayList[currentItem]; 
}; 

changeCont = function changeCont() { 
    currentCont = ".cont" + currentItem.toString(); 
}; 

$(currentCont).on("click", function(){ 
    $(currentCont + " p").delay(300).fadeIn(3000).html(currentArrayElement); 
    nextCurrentItem(); 
    changeCont(); 
    }); 
}); 

でも機能の動作は同じです。また、次のdivにクラス "selected"を追加/削除しようとしました。振る舞いは以前と同じです。

この問題を解決する方法をアドバイスできますか（イベントを呼び出すために各要素を1回クリックして）？

ありがとうございました！

Answer 1

あなたのコードはイベントを最初のDIVにのみ添付します。

はdiv要素にこの

var mArrayList = ["a", "b", "c"]; 
 
$(function() { 
 
    $(".fadeP").on("click", function() { 
 
    $("p",this).fadeIn(3000).html(mArrayList[this.id.replace("cont","")]); 
 
    }); 
 
});

.fadeP>p { display:none } 
 
#cont0 { border:1px solid red; height:50px } 
 
#cont1 { border:1px solid yellow; height:50px } 
 
#cont2 { border:1px solid green; height:50px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="fadeP" id="cont0"> 
 
    <p>Paragraph 0</p> 
 
</div> 
 
<div class="fadeP" id="cont1"> 
 
    <p>Paragraph 1</p> 
 
</div> 
 
<div class="fadeP" id="cont2"> 
 
    <p>Paragraph 2</p> 
 
</div>

Answer 2

複数の問題がありますを行うためのIDと同じクラスを与えます。最初のdivだけがクリック可能で、関数ブロックの外側に何も宣言されていないので、ローカル変数とグローバル変数が混在しています。また、コードが重複していることには役立ちません。

私はすべてのこれらの問題の固定下：

var currentItem = 0; 
 
var currentCont = ""; 
 
var currentArrayElement = ""; 
 
var mArrayList = ["a", "b", "c"]; 
 

 
$(document).ready(function() { 
 
    $("p").hide(); 
 
    currentItem = 0; 
 
    currentCont = ".cont" + currentItem.toString(); 
 
    currentArrayElement = mArrayList[currentItem]; 
 

 
    $('.clickable').on("click", function() { 
 
    if (currentItem <= 2) { 
 
     $(currentCont + " p").fadeIn(3000).html(currentArrayElement); 
 
     nextCurrentItem(); 
 
     changeCont(); 
 
    } 
 
    }); 
 
}); 
 

 
nextCurrentItem = function() { 
 
    currentItem += 1; 
 
    currentArrayElement = mArrayList[currentItem]; 
 
}; 
 

 
changeCont = function() { 
 
    currentCont = ".cont" + currentItem.toString(); 
 
};

div { 
 
    border: solid 1px red; 
 
    width: 100px; 
 
    height: 40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="clickable cont0"> 
 
    <p></p> 
 
</div> 
 
<div class="clickable cont1"> 
 
    <p></p> 
 
</div> 
 
<div class="clickable cont2"> 
 
    <p></p> 
 
</div>