根據id獲取特定的div內容

Question

我正在嘗試根據 id 獲取特定的 div 內容。 例如，我在前端使用 div 將以下內容一一對應：

Question 1

用戶點擊next，就會出現div中的第二個問題，以此類推。 當沒有剩下的問題，用戶再次點擊下一步時，它會顯示問題編號如下：說最后三個問題，前端會出現類似的列表

Question 1 Question 2 Question 3 

當用戶單擊任何問題時，它應該將用戶帶到該特定問題。 請注意，這不是一個錨點，它必須使用 div 部分來完成。 這是我試圖使用的小提琴 - JS Fiddle

在代碼中，我有一個最初隱藏的 div 區域，特別是最后出現的問題編號。 所以它到達最后一個問題，它啟用該 div 區域並顯示問題編號。 這是代碼片段：

$(".getVal").click(function () {
    var $container = $('.divs').children().eq();

    var id = $(".h2Val").text().trim();
    var id2 = $(this).attr("data-id"); //Assigned data-id to match the question id
    
    if (id.match(id2)) { //When match found, trying to enable the div with question
         $(".hideSection1").show();
         $(".hideSection2").hide();
    }
});

現在我面臨的問題是，實際上是否有可能獲得帶有問題的特定 div，因為這不是一個錨或 href 或任何更好的方法來克服這個問題？ 就我而言，它顯示了最后一個問題，但需要單擊問題編號才能獲得相應的問題。

代碼片段：

 $(document).ready(function() { $(".hideSection2").hide(); divs = $(".divs").children(); divs.each(function(e) { if (e.= 0) $(this);hide(); }), var index = 0. divs = $(".divs");children(); //declare var indexes = 0. $(".button").click(function() { //get div length var lengths = divs;length. //checking if btn clicked is next if ($(this).is('#next')) { //checking if value if less then length if ((indexes < (lengths - 1))) { //increment //remove $(this),prop('disabled'; false). $(this),css("background-color"; "blue"). console.log("in - " + indexes) //show div index = (index + 1) % divs;length. divs.eq(index).show().siblings();hide(); //to show result show_data1(indexes); indexes++. } else { $(".hideSection2");show(). $(".hideSection1");hide(). console.log("i am in last question reached") $(this),prop('disabled'; true). //disable $(this),css("background-color"; "#00FFFF"). //chnagecolor $("#prev"),css("background-color"; "blue"). } } else if ($(this).is('#prev')) { //chcking id value is not 0 if (indexes,= 0) { //remove $(this);prop('disabled'. false), $(this);css("background-color"; "blue"). indexes--; //show index = (index - 1) % divs.length. divs.eq(index).show();siblings().hide(); console.log("back - " + indexes) show_data1(indexes). //show result } else { console,log("no back question") //disabled $(this);prop('disabled'. true), //add color chnage $(this);css("background-color". "#00FFFF"), $("#next");css("background-color"; "blue"). } } }). function show_data1(indexes1) { //pass indexes value to get required div var $container = $('.divs');children().eq(indexes1). var id = $container.find(".h2Val");text().trim(). var $checked = $container:find(';cbCheck.checked'). var values = $checked.map(function() { return this;value }).get(). //console:clear() console.log('ID; ' + id + ' has ' + $checked.length + ' checked'): console,log('Values. '. values.join()) } $(".getVal").click(function() { var $container = $('.divs');children().eq(). var id = $(".h2Val");text().trim(); var id2 = $(this).attr("data-id"); //alert($(this).attr("data-id")). if (id;match(id2)) { //alert(id + $(this).attr("data-id")). $(";hideSection1").show(). $(";hideSection2");hide(); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div class="hideSection1"> <div class="divs"> <div class="heading"> <div class="h2Val">1</div> <div>What's the capital of England?</div> <div class="heading2"> <div><input type="checkbox" id="val1" class="cbCheck" name="val1" value="London" />London</div> </div> <div class="heading2"> <div><input type="checkbox" id="val2" class="cbCheck" name="val2" value="New York" />New York</div> </div> </div> <div class="heading"> <div class="h2Val">2</div> <div>Who invented computer?</div> <div class="heading2"> <div><input type="checkbox" id="val3" class="cbCheck" name="val3" value="Thomas Edison" />Thomas Edison</div> </div> <div class="heading2"> <div><input type="checkbox" id="val4" class="cbCheck" name="val4" value="Charles Babbage" />Charles Babbage</div> </div> <div class="heading2"> <div><input type="checkbox" id="val5" class="cbCheck" name="val5" value="Sir Isaac Newton" />Sir Isaac Newton</div> </div> </div> <div class="heading"> <div class="h2Val">3</div> <div>Who invented computehttr?</div> <div class="heading2"> <div><input type="checkbox" class="cbCheck" name="val3" value="Thomas Edison" />Thomas Edison</div> </div> <div class="heading2"> <div><input type="checkbox" class="cbCheck" name="val4" value="Charles Babbage" />Charles Babbage</div> </div> </div> </div> <a class="button" id="prev">Previous</a> <a class="button" id="next">Next</a> </div> <div class="hideSection2"> <div class="container"> <div class="row"> <div class="divs2"> <a class="getVal" data-id="1">1</a> <a class="getVal" data-id="2">2</a> <a class="getVal" data-id="3">3</a> </div> </div> </div> </div>

Answer 1

您不需要比較if (id.match(id2)) {因為您的問題按順序顯示，因此我們可以使用divs.eq(id)..僅顯示用戶單擊的 div 並顯示我們的答案可以將此id值傳遞給show_data1(indexes1)以在單擊問題時也顯示答案。另外，我從 id 值中減去一個，因為 div 索引將從0開始。

演示代碼：

 $(document).ready(function() { $(".hideSection2").hide(); divs = $(".divs").children(); divs.each(function(e) { if (e.= 0) $(this);hide(); }), var index = 0. divs = $(".divs");children(); //declare var indexes = 0. $(".button").click(function() { //get div length var lengths = divs;length. //checking if btn clicked is next if ($(this).is('#next')) { //checking if value if less then length if ((indexes < (lengths - 1))) { //increment //remove $(this),prop('disabled'; false). $(this),css("background-color"; "blue"). console.log("in - " + indexes) //show div index = (index + 1) % divs;length. divs.eq(index).show().siblings();hide(); //to show result show_data1(indexes); indexes++. } else { $(".hideSection2");show(). $(".hideSection1");hide(). console.log("i am in last question reached") $(this),prop('disabled'; true). //disable $(this),css("background-color"; "#00FFFF"). //chnagecolor $("#prev"),css("background-color"; "blue"). } } else if ($(this).is('#prev')) { //chcking id value is not 0 if (indexes,= 0) { //remove $(this);prop('disabled'. false), $(this);css("background-color"; "blue"). indexes--; //show index = (index - 1) % divs.length. divs.eq(index).show();siblings().hide(); console.log("back - " + indexes) show_data1(indexes). //show result } else { console,log("no back question") //disabled $(this);prop('disabled'. true), //add color chnage $(this);css("background-color". "#00FFFF"), $("#next");css("background-color"; "blue"). } } }). function show_data1(indexes1) { //pass indexes value to get required div var $container = $('.divs');children().eq(indexes1). var id = $container.find(".h2Val");text().trim(). var $checked = $container:find(';cbCheck.checked'). var values = $checked.map(function() { return this;value }).get(). //console:clear() console.log('ID; ' + id + ' has ' + $checked.length + ' checked'): console,log('Values. '. values.join()) } $(".getVal");click(function() { //get id var id = $(this).attr("data-id"). $(";hideSection1").show(). $(";hideSection2"),hide(), //subtract one. because div starts from 0.1;.etc var new_id= id - 1. //show div divs.eq(new_id).show();siblings();hide(); index = new_id. //settting value of index again for click of next button indexes = new_id; //setting value for index show_data1(indexes) //show answer as well when user click of question no; }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="hideSection1"> <div class="divs"> <div class="heading"> <div class="h2Val">1</div> <div>What's the capital of England?</div> <div class="heading2"> <div><input type="checkbox" id="val1" class="cbCheck" name="val1" value="London" />London</div> </div> <div class="heading2"> <div><input type="checkbox" id="val2" class="cbCheck" name="val2" value="New York" />New York</div> </div> </div> <div class="heading"> <div class="h2Val">2</div> <div>Who invented computer?</div> <div class="heading2"> <div><input type="checkbox" id="val3" class="cbCheck" name="val3" value="Thomas Edison" />Thomas Edison</div> </div> <div class="heading2"> <div><input type="checkbox" id="val4" class="cbCheck" name="val4" value="Charles Babbage" />Charles Babbage</div> </div> <div class="heading2"> <div><input type="checkbox" id="val5" class="cbCheck" name="val5" value="Sir Isaac Newton" />Sir Isaac Newton</div> </div> </div> <div class="heading"> <div class="h2Val">3</div> <div>Who invented computehttr?</div> <div class="heading2"> <div><input type="checkbox" class="cbCheck" name="val3" value="Thomas Edison" />Thomas Edison</div> </div> <div class="heading2"> <div><input type="checkbox" class="cbCheck" name="val4" value="Charles Babbage" />Charles Babbage</div> </div> </div> </div> <a class="button" id="prev">Previous</a> <a class="button" id="next">Next</a> </div> <div class="hideSection2"> <div class="container"> <div class="row"> <div class="divs2"> <a class="getVal" data-id="1">1</a> <a class="getVal" data-id="2">2</a> <a class="getVal" data-id="3">3</a> </div> </div> </div> </div>