I am trying to get specific div content based on id. As an example, I've the following contents one by one in the front-end using div:
Question 1
User clicks next, then the second question within the div and so on will come up. When there will be no questions left and user clicks next again, it'll show the question numbers as follows: Say for three questions at the end, a similar list will appear in the front-end
Question 1 Question 2 Question 3
When user will click in any of the question, it should take the user to that specific question. Notice that, this isn't an anchor and it has to be done using the div section. Here's a fiddle that I was trying to work with - JS Fiddle
In the code, I've a div area that remains hidden initially, specifically the question numbers that'll appear at the end. So it reaches the last question, it enables that div area and shows the question number. Here is the code snippet:
$(".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();
}
});
Now the problem I face, is it actually possible to get that specific div with question as this isn't an anchor or href or any better way to overcome this issue? In my case, it shows the question but the last one but required to obtain corresponding questions clicking on question numerbers.
Code Snippet:
$(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>
