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>
You don't need to compare if (id.match(id2)) { because your questions are shown in sequence so we can use divs.eq(id).. to show only div which is clicked by user and to show answer we can pass this id value to show_data1(indexes1) to show answer as well when question is clicked.Also , i have subtract one from the id value because div index will start from 0.
Demo Code :
$(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>
Related
I'm looking to clone addDriverContent (working fine) and increment the numbers for the name attribute on name="description" to name="description2", name="description3" on the clones
Also if anyone know how to also clone the add button so it works as it should on the clones would be extra points :) Some fiddles would be awesome :)
<div id="addDriverContent" style="display:none;">
<div class="content">
<div class="row">
<div class="col-md-12">
<label for="description" class="form-label font-weight-bold">Item Description:</label>
<input type="text" class="form-control" id="description" name="description" placeholder="Enter the items description"/>
</div>
</div>
</div>
</div>
<button type="button" class="add_field_button" id="clone_button">Add another item</button>
<div id="clone_wrapper"></div>
<script type="text/javascript">
$(function($) {
var max_fields = 4;
// origin selector would select all the first div ancestors.
var $content = $("#addDriverContent > .content");
var $clone_wrapper = $("#clone_wrapper") ;
var $add_button = $(".add_field_button"); //Add button ID
$add_button.click(function(e) {
e.preventDefault();
var counter = 0;
// jquery object is array liked object. Length mean how many elements is selected.
if ( $clone_wrapper.children(".content").length < max_fields )
$content.clone().appendTo($clone_wrapper);
});
$clone_wrapper.on("click",".remove_field", function(e){
e.preventDefault();
// this would be more specific.
$(this).parent(".content").remove();
})
});
</script>
As I have no idea what you intend to do with it, I will provide you with my dirty solution for it:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="addDriverContent" style="display:none;">
<div class="content">
<div class="row">
<div class="col-md-12">
<label for="description" class="form-label font-weight-bold">Item Description:</label>
<input type="text" class="description form-control" id="description" name="description" placeholder="Enter the items description"/>
<input type="text" class="fname form-control" id="fname" name="fname"/>
Remove<button type="button" class="add_field_button" id="clone_button">Add another item</button>
</div>
</div>
</div>
</div>
<button type="button" class="add_field_button" id="clone_button">Add another item</button>
<div id="clone_wrapper"></div>
<script type="text/javascript">
$(function($) {
var max_fields = 4;
// origin selector would select all the first div ancestors.
var $content = $("#addDriverContent > .content");
var $clone_wrapper = $("#clone_wrapper") ;
var $add_button = $(".add_field_button"); //Add button ID
$(".add_field_button").click(function() {
//e.preventDefault();
//var counter = 0;
// jquery object is array liked object. Length mean how many elements is selected.
if ( $clone_wrapper.children(".content").length < max_fields ) {
$content.clone().appendTo($clone_wrapper);
//$add_button.clone().appendTo($clone_wrapper);// mine
$(".description").each(function(index) {
$( this ).attr('name', 'description'+index)
});
$(".fname").each(function(index) {
$( this ).attr('name', 'fname'+index)
});
}
});
$(document).on('click', "#clone_wrapper .add_field_button", function () {
$('#addDriverContent + .add_field_button').trigger('click');
})
$(document).on('click', ".remove_field", function () {
//e.preventDefault();
// this would be more specific.
$(this).closest(".content").remove();
});
});
</script>
sorry i do not speak english well, i want to create a tool that allows to duplicate a div thanks to an "input number" and a button and then I also want to clone this tool by reinitializing it to be able to use the tool again , Here is a piece of code:
$(function() {
$('#btn_dupliquate').on('click', function() {
var numDuplication = $('#num-duplication').val();
if (numDuplication > -1) {
var div = $('.common_preview');
$('.result').html('');
for (var i = 0; i < numDuplication; i++) {
$('.result').append(div.clone());
}
}
});
});
$(function() {
$(".heading").keyup(function() {
var heading=$(this).val();
$(".common_preview").html("<div class='bloc'><p class='model'>"+heading+"</p></div>");
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toNumDuplicate">
<input type="text" class="heading" />
<br/>
<br/>
<input id="num-duplication" type="number" >
<br/>
<br/>
<button id="btn_dupliquate"> dupliquate </button>
</div>
<div id="toDuplicate">
<div class="common_preview" >
<div class="bloc">
<p class="model">test</p>
</div>
</div>
</div>
<div class="result"></div>
<button id="btn_clone">clone</button>
You could abstract your function to take dynamic selector strings for the duplicate button, duplicate number input, preview div and result div.
I am trying to create a system to filter through some tags by hiding and showing the appropriate items.
When .brandFilter is clicked, it needs to show the div using the id of the checkbox. When .prodFilter is clicked, it needs to show the corresponding colors but not show any deselected ID's (unless none have been selected, in which case show everything matching the color).
Right now when I click Epson and HP it works; but when I click Red it will show the red Lexmark product which is not desired; it was already filtered out when I selected the brand. Ideally clicking #brnd_HP, #brnd_Epson and #typ_Red will display Product A and F.
Deselecting a filter should "undo" whatever previous work it did.
Below is the markup I have now:
<h2>Brand</h2>
<input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_Canon" />
<input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_Epson" />
<input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_HP" />
<input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_Lexmark" />
<input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_Xerox" />
<h2>Color</h2>
<input type="checkbox" class="prodFilter" name="typeFilter" id="typ_Red" />
<input type="checkbox" class="prodFilter" name="typeFilter" id="typ_Blue" />
<div class="prdbx brnd_Epson typ_Red">Product A</div>
<div class="prdbx brnd_Canon typ_Red">Product B</div>
<div class="prdbx brnd_Epson typ_Blue">Product C</div>
<div class="prdbx brnd_Lexmark typ_Red">Product D</div>
<div class="prdbx brnd_Canon typ_Blue">Product E</div>
<div class="prdbx brnd_HP typ_Red">Product F</div>
The jQuery is not functioning as intended, but this is what I have so far. I really can't seem to wrap my head around the seemingly query like nature of toggling visibility with multiple parameters like this. The HP/Epson part works fine, but once the color is introduced it simply shows everything relating to the color ID.
<script>
jQuery(document).ready(function(){
$('.brandFilter').click(function(e) {
$('.brandbx').hide();
var thisFilter = "";
$('input[name=brandFilter]:checked').each(function(e) {
thisFilter += '.'+this.id;
});
$(thisFilter).show();
});
// when a filter is clicked
$('.prodFilter').click(function(e) {
$('.prdbx').hide(); // hide all products
var thisFilter = "";
var thisCounter = 0;
// for each clicked filter
$('.prodFilter:checked').each(function(e) {
thisFilter += '.'+this.id;
$('.'+this.id).show(); // show the products matching filter
thisCounter++;
});
if(thisCounter == 0){
$('.prdbx').show(); // if no clicked filters, show all products
$('.brandbx').show();
}
});
});
</script>
You need to combine the filters which means persisting the filter from the first checkbox somehow. This works.
var thisFilter1 = "";
jQuery(document).ready(function(){
$('.brandFilter').click(function(e) {
$('.brandbx').hide();
thisFilter1 = "";
var sep = ""
$('input[name=brandFilter]:checked').each(function(e) {
thisFilter1 = thisFilter1 + sep + '.'+this.id;
sep = ","
});
$(thisFilter1).show();
});
// when a filter is clicked
$('.prodFilter').click(function(e) {
$('.prdbx').hide(); // hide all products
var thisCounter = 0;
var thisFilter = "";
var sep=""
// for each clicked filter
$('.prodFilter:checked').each(function(e) {
thisFilter = thisFilter + sep + '.' + this.id;
sep=","
thisCounter++;
});
if(thisCounter == 0){
$('.prdbx').show(); // if no clicked filters, show all products
$('.brandbx').show();
}
else {
$('.prdbx').each(function() {
if ($(this).is(thisFilter1) && $(this).is(thisFilter)){
$(this).show()
}
})
}
});
});
EDIT: Updated for multiple selection combos. Say hello to jquery .is(). An interesting function that does not return a jq object so can't be chained but can be used inside an if test. You can now have Canon red, blue or red + blue, or HP + Canon blue, etc.
I might have not understand the desired functionality because in my code none of the products is shown at the beginning.
HTML:
<h2>Brand</h2>
<input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_Canon" /> Canon
<br />
<input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_Epson" /> Epson
<br />
<input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_HP" /> HP
<br />
<input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_Lexmark" /> Lexmark
<br />
<input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_Xerox" /> Xerox
<br />
<h2>Color</h2>
<input type="checkbox" class="prodFilter" name="typeFilter" id="typ_Red" /> Red
<br />
<input type="checkbox" class="prodFilter" name="typeFilter" id="typ_Blue" /> Blue
<div class="prdbx brnd_Epson typ_Red show">Epson Red</div>
<div class="prdbx brnd_Canon typ_Red show">Canon Red</div>
<div class="prdbx brnd_Epson typ_Blue show">Epson Blue</div>
<div class="prdbx brnd_Lexmark typ_Red show">Lexmark Red</div>
<div class="prdbx brnd_Canon typ_Blue show">Canon Blue</div>
<div class="prdbx brnd_HP typ_Red show">HP Red</div>
CSS:
.prdbx {
display: none;
}
.prdbx.show {
display: block;
}
JavaScript:
jQuery(document).ready(function() {
$(".brandFilter").on('change', function() {
//Filter by brand first
filterByBrand();
//Then filter by color
filterByProd();
});
$(".prodFilter").on('change', function() {
filterByProd();
});
});
function filterByBrand() {
var $allBrands = $(".brandFilter");
if (!$allBrands.filter(':checked').length) {
//If all brand checkboxes are unchecked, show all prdbx divs
$('.prdbx').addClass('show');
} else {
for (var i = 0; i < $allBrands.length; ++i) {
var $brand = $allBrands.eq(i);
//If a brand is checked show it, otherwise hide it
if ($brand.is(':checked')) {
$('.' + $brand.attr('id')).addClass('show');
} else {
$('.' + $brand.attr('id')).removeClass('show');
}
}
}
}
function filterByProd() {
var $allProdFilters = $(".prodFilter");
var noneIsSelected = true;
for (var i = 0; i < $allProdFilters.length; ++i) {
var $prodFilter = $allProdFilters.eq(i);
var $prod = $('.' + $prodFilter.attr('id'));
//If the checkbox is checked
if ($prodFilter.is(':checked')) {
noneIsSelected = false;
if (!$prod.hasClass('show')) {
$prod.addClass('show');
}
} else {
$prod.removeClass('show');
}
}
//If no color is selected, filter by brand
if (noneIsSelected) {
filterByBrand();
}
}
And here is the fiddle: https://jsfiddle.net/mehmetb/m2zLt6Lo/
There are 8 divs and an empty div. Also there are 8 checkboxes. Initially 4 divs are displayed and the remaining are display:none and 4 checkboxes are checked and remaining are uncheked
The Fiddle link is here
This is my code
<div class="container">
<div class="empty" style="display:none;"></div>
<div class="content div_box_1">
<div class="box " style="background:black;"></div>
</div>
<div class="content div_box_2">
<div class="box " style="background:blue;"></div>
</div>
<div class="content div_box_3">
<div class="box " style="background:yellow;"></div>
</div>
<div class="content div_box_4">
<div class="box " style="background:orange;"></div>
</div>
<div class="content div_box_5">
<div class="box " style="background:pink; display:none;"></div>
</div>
<div class="content div_box_6">
<div class="box " style="background:indigo; display:none;"></div>
</div>
<div class="content div_box_7">
<div class="box " style="background:red; display:none;"></div>
</div>
<div class="content div_box_8">
<div class="box " style="background:skyblue; display:none;"></div>
</div>
<div class="checks">
<input type="checkbox" name="box1" checked value="1" class="css-checkbox"/>black
<input type="checkbox" name="box2" checked value="2" class="css-checkbox"/>blue
<input type="checkbox" name="box3" checked value="3" class="css-checkbox"/>yellow
<input type="checkbox" name="box4" checked value="4" class="css-checkbox"/>orange
<input type="checkbox" name="box5" value="5" class="css-checkbox"/>pink
<input type="checkbox" name="box6" value="6" class="css-checkbox"/>indigo
<input type="checkbox" name="box7" value="7" class="css-checkbox"/>red
<input type="checkbox" name="box8" value="8" class="css-checkbox"/>sky-blue
When I uncheck any of these 4 checked boxes the respective div must hide and the class=empty div must be shown eg if I uncheck checkbox with value=2 then div with class="div_box_2 must be hidden and in that place div with class=empty must be displayed and again when checkbox with value=5 or value=6 or value=7 or value=8 is checked then the div with class=empty must be hide and the corresponding div with class=div_box_5 or class=div_box_6 or class=div_box_7 or class=div_box_8 must be displayed in the place of empty div.
Its like removing a div and putting a default div in that place and when again some other div is to be displayed then that div must be displayed in the place of default div
How is this possible?
Please anyone help.
Thank you in advance
What you need is a empty container is each of the content element. You can use a script to add it
//add an empty container to all content elements
$('.container .content').append('<div class="empty" style="display:none;"></div>');
$("input.css-checkbox:checkbox").click(function () {
var cval = $(this).val();
var $div = $(".div_box_" + this.value).slideToggle("fast");
$div.next()[this.checked ? 'slideUp' : 'slideDown']("fast");
})
Demo: Fiddle
EDIT
JSfiddle: click
I changed a few thing:
I removed your style from your HTML and put it in your CSS;
You want to replace the divs so there is no need to hide any;
Let me explain the JS:
var divs = [];
divs.push('<div class="content" id="empty">' +
'<div class="box div_box_0 empty"></div>' +
'</div>');
$('.box').each(function (index) {
divs[index+1] = $(this).parent();
$(this).parent().remove();
});
var selected = [];
var max_boxes = 4;
$('.css-checkbox').each(function () {
if ($(this).is(':checked') && selected.length < max_boxes) {
selected.push(divs[selected.length + 1]);
} else {
$(this).attr('checked', false);
}
});
while (selected.length < 4) {
selected.push(divs[0]);
}
for (var i in selected) {
$('.container').append(selected[i]);
}
$(".css-checkbox").click(function(){
if ($('.css-checkbox:checked').length > 4) {
$(this).attr('checked', false);
} else {
var cval = $(this).val();
var checked = $(this).is(':checked');
if (checked) {
var empty = $.inArray(divs[0], selected);
selected[empty] = divs[cval];
$('#empty').replaceWith(divs[cval]);
} else {
var filled = $.inArray(divs[cval], selected);
selected[filled] = divs[0];
$('.container').find(divs[cval]).replaceWith(divs[0]);
}
}
});
First I create an array with the divs so you can place and replace them. The empty div has to be put in manually, since you want this one more than once. In the array you get a reference to the element. Next i remove each div out of your html.
Next I get the selected boxes and put the div by value in the selected array. After that I append the first 4 selected divs to the container.
The click function checks if there are 4 boxes clicked, when you click on a 5th one it removes the check immediately. Next there is a check to see if you checked or unchecked the checkbox. When you check it, replaces the first empty div with the selected div. If you uncheck it replaces the selected div with an empty div.
Try this Demo
$(function() {
var selectCheckBox = $(".checks input:checkbox")
$(selectCheckBox).click(function() {
var checkingValue = $(this).val()
if(checkingValue == 1){
$('.div_box_1').toggle();
}
else if(checkingValue == 2){
$('.div_box_2').toggle();
}
else if(checkingValue == 3){
$('.div_box_3').toggle();
}
else if(checkingValue == 4){
$('.div_box_4').toggle();
}
})
var selectHiddenChecks = $('.checks input:checkbox')
$(selectHiddenChecks).click(function() {
var checkingValue = $(this).val();
if(checkingValue == 5) {
$('.div_box_5').toggle();
}
else if(checkingValue == 6) {
$('.div_box_6').toggle();
}
else if(checkingValue == 7) {
$('.div_box_7').toggle();
}
else if(checkingValue == 8) {
$('.div_box_8').toggle();
}
})
})
I am trying to write a javascript function that will search all of the specified divs in a html page for the substring contained in my search bar. How can I do this simply?
Here is my code so far, I have it working so that the showMe method will only display the divs selected, I just need the substring code to work now. Could someone please help?
<html>
<head>
<script type="text/javascript">
<!--
function dynamicSearch() {
var val = document.getElementById('search').value;
if (val == '')
val = '-1';
var srch = new RegExp(val, "gi");
var els = document.getElementsByClassName('row');
for (var idx in els) {
if (idx != parseInt(idx))
continue;
var el = els[idx];
if (typeof(el.innerHTML) !== 'undefined') {
console.log(el.innerHTML);
if (srch.test(el.innerHTML)) {
el.style.display = 'block';
} else {
el.style.display = 'none';
}
}
}
}
function showMe (it, box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById(it).style.display = vis;
}
//-->
</script>
</head>
<body>
<form>
<label for="search">Search:</label>
<input type="text" name="search" id="search" onkeyup="dynamicSearch()"/>
<input type="checkbox" name="modtype" value="value1" onclick="showMe('div1', this)" />value1
<input type="checkbox" name="modtype" value="value2" onclick="showMe('div2', this)" />value2
<input type="checkbox" name="modtype" value="value3" onclick="showMe('div3', this)" />value3
<input type="checkbox" name="modtype" value="value4" onclick="showMe('div4', this)" />value4
<input type="checkbox" name="modtype" value="value5" onclick="showMe('div5', this)" />value5
<div class="row" id="div1" style="display:none">Show Div 1</div>
<div class="row" id="div2" style="display:none">Show Div 2</div>
<div class="row" id="div3" style="display:none">Show Div 3</div>
<div class="row" id="div4" style="display:none">Show Div 4</div>
<div class="row" id="div5" style="display:none">Show Div 5</div>
</form>
</body>
</html>
This sort of stuff is a lot easier with jQuery.
For example, your dynamicSearch function could be replaced with this:
function dynamicSearch() {
var val = $('#search').val();
if (val == '') val = '-1';
var srch = new RegExp(val, "gi");
$('.row').each(function(i, el) {
if ($(this).text().match(srch)) {
$(this).show();
} else {
$(this).hide();
}
});
}
and you can get animation effects for free too, which you can't easily do just be setting the CSS display property.
I've put a working fiddle up at http://jsfiddle.net/alnitak/nLxc4/ which I think does what you're asking for.