I am trying to replace the content of the divs on checkbox's check/un-check events.
HTML:
<div class="checks">
<input type="checkbox" class="section-1" value="section-1">check-1
<input type="checkbox" class="section-2" value="section-2">check-2
<input type="checkbox" class="section-3" value="section-3">check-3
<input type="checkbox" class="section-4" value="section-4">check-4
<input type="checkbox" class="section-5" value="section-5">check-5
<input type="checkbox" class="section-6" value="section-6">check-6
<input type="checkbox" class="section-7" value="section-7">check-7
</div><br><br>
<div class="divs">
<div class="section-1">
<div class="content-1">
div-1
</div>
</div>
<div class="section-2">
<div class="content-2">
div-2
</div>
</div>
<div class="section-3">
<div class="content-3">
div-3
</div>
</div>
<div class="section-4">
<div class="content-4">
div-4
</div>
</div>
<div class="section-5">
<div class="content-5">
div-5
</div>
</div>
<div class="section-6">
<div class="content-6">
div-6
</div>
</div>
<div class="section-7">
<div class="content-7">
div-7
</div>
</div>
</div>
<div class="divs-back" style="display: none">
<div class="section-1">
<div class="content-1">
div-1
</div>
</div>
<div class="section-2">
<div class="content-2">
div-2
</div>
</div>
<div class="section-3">
<div class="content-3">
div-3
</div>
</div>
<div class="section-4">
<div class="content-4">
div-4
</div>
</div>
<div class="section-5">
<div class="content-5">
div-5
</div>
</div>
<div class="section-6">
<div class="content-6">
div-6
</div>
</div>
<div class="section-7">
<div class="content-7">
div-7
</div>
</div>
</div>
jQuery:
$(":checkbox:lt(7)").prop("checked", true);
var array = ["section-1", "section-2", "section-3", "section-4", "section-5", "section-6", "section-7"];
var unArray = [];
var unChecked = 0;
$('input[type="checkbox"]').click(function () {
if ($(this).prop('checked')) {
// Add the new element if checked:
if (array.indexOf($(this).val()) < 0) {
array.push($(this).val());
unChecked = unArray.slice(-1)[0];
unArray.splice(-1, 1);
}
} else {
// Remove the element if unchecked:
if (array.indexOf($(this).val()) >= 0) {
array.splice(array.indexOf($(this).val()), 1);
unArray.push($(this).val());
unChecked = 0;
}
}
showHideDiv($(this).val(), unChecked);
console.log(array);
console.log(unArray);
});
function showHideDiv(value, unCheked) {
console.log(unCheked);
if (unCheked != '0') {
$('.divs').find("." + unCheked).html($('.divs-back').find("." + value).html());
} else {
$('.divs').find("." + value).html('');
}
}
It is replacing the contents successfully on first attempt. But on the second attempt, the positions of the div contents are changed so not getting the desired output.
jsfiddle: https://jsfiddle.net/2th5gmLa/
Edit:
Actually, I don't want to just hide show. I want to replace the div content on last unchecked section. When I uncheck Section-1, Section-2, Section-3, then if we check section-1, then it should place in the DIV of the Section-3.
Why your code is not working?
The issue is you are pushing element. The push() method adds new items to the end of an array, and returns the new length.
//array.push($(this).val());
remove this line
Change you have to make.
$('input[type="checkbox"]').click(function() {
var unchkdArray = [];
var chkdArrray = [];
$('input[type="checkbox"]').map(function(){
if ($(this).is(':checked')) {
chkdArrray.push($(this).val())
} else {
unchkdArray.push($(this).val())
}
});
var selected = $(this).val()
if ($(this).is(':checked')) {
$('div.' + selected).show()
} else {
$('div.' + selected).hide()
}
});
Fiddle Demo
Try this...
Plunker Link
$(":checkbox:lt(7)").prop("checked", true);
var array = ["section-1", "section-2", "section-3", "section-4", "section-5", "section-6", "section-7"];
var unArray = [];
var unChecked = 0;
$('input[type="checkbox"]').click(function () {
console.log($(this)['context']['className']);
$( ".divs ."+$(this)['context']['className'] ).toggleClass( "hide" )
});
Plunker Link
Related
I am trying to get first letter of firstname and lastname from a div and paste it in another div but it is pasting the same value in all divs and not taking unique value from each div.
Working Fiddle: https://jsfiddle.net/bv7w8dxg/1/
Issue Fiddle: https://jsfiddle.net/bv7w8dxg/
var takword = $('.nameholder').text().split(' ');
var text = '';
$.each(takword, function () {
text += this.substring(0, 1);
});
$('.avatarholder').text(text);
Markup
`
John Doe
<div class="main-holder">
<div class="nameholder">Kyle Davis</div>
<div class="avatarholder"></div>
</div>
<div class="main-holder">
<div class="nameholder">Seim Seiy</div>
<div class="avatarholder"></div>
</div>
<div class="main-holder">
<div class="nameholder">Momma Boy</div>
<div class="avatarholder"></div>
</div>`
You are using class selectors, which selects all elements with the given class name. That's why you have all the elements set with same value
You need to wrap your elements then process each row independently
I updated your code snippet to demonstrate this:
$('.row').each(function() {
var takword = $('.nameholder', this).text().split(' ');
var text = '';
$.each(takword, function () {
text += this.substring(0, 1);
});
$('.avatarholder', this).text(text);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="nameholder">John Doe</div>
<div class="avatarholder"></div>
</div>
<div class="row">
<div class="nameholder">Kyle Davis</div>
<div class="avatarholder"></div>
</div>
<div class="row">
<div class="nameholder">Seim Seiy</div>
<div class="avatarholder"></div>
</div>
<div class="row">
<div class="nameholder">Momma Boy</div>
<div class="avatarholder"></div>
</div>
I have this https://codepen.io/anon/pen/RgQOWz
It has increment/decrement and it does what I want, but the problem is they both change together and I want to separate counter 1 from counter 2 meaning if I want to change counter 1 values it doesn't have to effect counter 2 and vice versa.
I can basically give counter 2 different class names and write another script for it but that is a lot of work considering the counters will be many.
so how do I do this?
Javascript code
$(".increment").click(function() {
var score1 = $(".score").val();
score1++;
$(".score").val(score1);
});
$(".decrement").click(function() {
var score1 = $(".score").val();
if (score1 == 0) {
} else {
score1--;
$(".score").val(score1);
}
});
Change you JavaScript to this
$(".increment").click(function() {
var score1 = $(this).next().find('.score').val();
score1++;
$($(this).next().find('.score').val(score1));
});
$(".decrement").click(function() {
var score1 = $(this).prev().find('.score').val();
if (score1 == 0) {
} else {
score1--;
$(this).prev().find('.score').val(score1);
}
});
instead of setting value to .score find the score based on which increment or decrement selection was selected
here is a working codepen https://codepen.io/anon/pen/xrYoRr#anon-login
Both counters using elements with the same .score class to keep the score. So each element updates both .score. You should either use IDs instead of classes, or (preferably) dynamically create elements and assign behaviors directly.
For example:
Add onClick event to document.createElement("th")
jQuery how to bind onclick event to dynamically added HTML element
I have made some changes to your code:
<div class="row">
<div class="col-xs-6">
<div class="row end-xs">
<div class="row middle-xs">
<p>Counter1</p>
</div>
<div class="prdin">
<div class="increment-c1">
<i class="icon-arrow-up icons"></i>
</div>
<div id="input1">
<input type="number" class="score1" value="0">
</div>
<div class="decrement-c1">
<i class="icon-arrow-down icons"></i>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row start-xs">
<div class="prdin">
<div class="increment-c2">
<i class="icon-arrow-up icons"></i>
</div>
<div id="input2">
<input type="number" class="score2" value="0">
</div>
<div class="decrement-c2">
<i class="icon-arrow-down icons"></i>
</div>
</div>
<div class="row middle-xs">
<p>Counter2</p>
</div>
</div>
</div>
</div>
And javascript code as below:
$(".increment-c1").click(function() {
var score1 = $(".score1").val();
score1++;
$(".score1").val(score1);
});
$(".decrement-c1").click(function() {
var score1 = $(".score1").val();
if (score1 == 0) {
} else {
score1--;
$(".score1").val(score1);
}
});
$(".increment-c2").click(function() {
var score1 = $(".score2").val();
score1++;
$(".score2").val(score1);
});
$(".decrement-c2").click(function() {
var score1 = $(".score2").val();
if (score1 == 0) {
} else {
score1--;
$(".score2").val(score1);
}
});
I have a list of hidden divs and would like to be able to show one div at a time, when a button is pressed, .. I am having a hard time writing the proper loop for this.
product_options: function() {
var product_option = $('.product_product_options_option_name')
$(product_option).css("display", "none");
$('.add_product_option').on('click', function (e) {
e.preventDefault();
$(product_option).each(function(){
$(this).css("display", "block")
});
});
}
currently it displays them all onclick, i deleted all my other loop attempts, bc they were egregiously wrong or were not doing much
Try
product_option.first().show(); //show only the first one
product_option = product_option.slice(1); //remove the first one
Demo:
$(function() {
var options = $('.product_option').hide();
$('.add').click(function() {
if(options.length) {
options.first().show();
options = options.slice(1);
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product_option">Option 1</div>
<div class="product_option">Option 2</div>
<div class="product_option">Option 3</div>
<div class="product_option">Option 4</div>
<div class="product_option">Option 5</div>
<div class="product_option">Option 6</div>
<div class="add">Add product option</div>
product_options: function() {
var product_option = $('.product_product_options_option_name')
$(product_option).css("display", "none");
$('.add_product_option').on('click', function (e) {
e.preventDefault();
$(product_option + ':hidden').eq(0).show();
});
}
try this : demo
$('.product_product_options_option_name').hide();
var count = 0;
$('.add_product_option').on('click',function(){
$('.product_product_options_option_name:eq('+count+')').show();
count++;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="add">
<input type="button" class="add_product_option" value="click" />
</div>
<div class="product_product_options_option_name">
<label>1div</label>
</div>
<div class="product_product_options_option_name">
<label>2div</label>
</div>
<div class="product_product_options_option_name">
<label>3div</label>
</div>
<div class="product_product_options_option_name">
<label>4div</label>
</div>
I have a development issue with jQuery script. I've tried to find something to re-purpose but have not been able to find exactly what I need. So I took a stab at writing something but have yet to get it to work correctly and I'm such a novice that I cannot seem to figure it out.
I am trying to get 2 radio buttons (first grouping of 3, second grouping of 2) to return 1 of 6 div tags on selection of both radio buttons.
I only wrote enough script for just clinical with either sales or support options.
html:
<div class="input-quest">Question 1</div>
<div id="optSelectBU">
<input type="radio" name="button1" value="clinical" />
<label>Clinical</label>
<input type="radio" name="button1" value="financial" />
<label>Financial</label>
<input type="radio" name="button1" value="pharmacy" />
<label>Pharmacy</label>
</div>
<div class="input-quest">Question 2</div>
<div id="optSelectService">
<input type="radio" name="button2" value="support" />
<label>Support</label>
<input type="radio" name="button2" value="sales" />
<label>Sales</label>
</div>
<div id="Clinical-Support">
<div class="block">
<div class="input-quest">Div 1</div>
</div>
</div>
<div id="Clinical-Sales">
<div class="block">
<div class="input-quest">Div 2</div>
</div>
</div>
<div id="Financial-Support">
<div class="block">
<div class="input-quest">Div 3</div>
</div>
</div>
<div id="Financial-Sales">
<div class="block">
<div class="input-quest">Div 4</div>
</div>
</div>
<div id="Pharmacy-Support">
<div class="block">
<div class="input-quest">Div 5</div>
</div>
</div>
<div id="Pharmacy-Sales">
<div class="block">
<div class="input-quest">Div 6</div>
</div>
</div>
Script:
$(document).ready(function () {
$("#Clinical-Support").hide();
$("#Clinical-Sales").hide();
$("#Financial-Support").hide();
$("#Financial-Sales").hide();
$("#Pharmacy-Support").hide();
$("#Pharmacy-Sales").hide();
$("#optSelectBU").change(function () {
if ($('input[name=button1]').val() == "clinical" && $('input[name=button2]').val() == "sales") {
$("#Clinical-Sales").show();
} else {
$("#Clinical-Support").hide();
$("#Clinical-Sales").hide();
$("#Financial-Support").hide();
$("#Financial-Sales").hide();
$("#Pharmacy-Support").hide();
$("#Pharmacy-Sales").hide();
}
});
$("#optSelectBU").change(function () {
if ($('input[name=button1]').val() == "clinical" && $('input[name=button2]').val() == "support") {
$("#Clinical-Support").show();
} else {
$("#Clinical-Support").hide();
$("#Clinical-Sales").hide();
$("#Financial-Support").hide();
$("#Financial-Sales").hide();
$("#Pharmacy-Support").hide();
$("#Pharmacy-Sales").hide();
}
});
});
Here is fiddle link:
http://jsfiddle.net/schoward30506/LV5nQ/3/
Its not pretty, but if you use data-attributes rather than the id then you could simplify your code massively:
$(document).ready(function () {
$("div[data-cats]").hide();
$("input[name=button1], input[name=button2]").change(function () {
var b1 = $('input[name=button1]:checked').val();
var b2 = $('input[name=button2]:checked').val();
$("div[data-cats]").hide();
$("div[data-cats='"+b1+" "+b2+"']").show();
});
});
http://jsfiddle.net/LV5nQ/6/
i fiddled around and came to this solution.
please keep in mind, that i added a div#container around your changing divs.
http://jsfiddle.net/honk1/LV5nQ/10/
$(document).ready(function () {
$("#container > div").hide();
var input1, input2;
function checkboxChecker() {
if ( input1 === "clinical" && input2 === "sales" ) {
$("#Clinical-Sales").show().siblings("div").hide();
} else if ( input1 === "clinical" && input2 === "support" ) {
$("#Clinical-Support").show().siblings("div").hide();
} else {
$("#container > div").hide();
}
};
$("input[name=button1], input[name=button2]").change(function () {
input1 = $('input[name=button1]:checked').val();
input2 = $('input[name=button2]:checked').val();
checkboxChecker();
});
});
Here is the code up to now. i want to access the value 1 of the <div class="field-item even">1</div>, and then if the value is 1 add a class, if the value is 0, add a another class. My code only access the first field-collection-container, i can't figure it out the problems.
$(document).ready(function () {
jQuery.each($('.field-collection-container'), function (i, obj) {
alert($(this).find('.field-items .content .field-item').text());
})
});
the html
<div class="container">
<div class="field-collection-container clearfix">
<div class="field field-name-field-interview-feeling field-type-field-collection field-label-above">
<div class="field-label">TEXT</div>
<div class="field-items">
<div class="field-item even">
<div class="field-collection-view clearfix view-mode-full field-collection-view-final">
<div class="entity entity-field-collection-item field-collection-item-field-interview-feeling clearfix" about="/dtesthkinterview/field-collection/field-interview-feeling/4" typeof="">
<div class="content">
<div class="field field-name-field-19 field-type-list-boolean field-label-above">
<div class="field-label">TEXT</div>
<div class="field-items">
<div class="field-item even">1</div>
</div>
</div>
<div class="field field-name-field-no-people field-type-list-boolean field-label-above">
<div class="field-label">TEXT</div>
<div class="field-items"><div class="field-item even">0</div></div>
</div>
<div class="field field-name-field-untrust field-type-list-boolean field-label-above">
<div class="field-label">TEXT</div>
<div class="field-items"><div class="field-item even">0</div></div>
</div>
<div class="field field-name-field-waste-money field-type-list-boolean field-label-above">
<div class="field-label">TEXT</div>
<div class="field-items"><div class="field-item even">0</div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="field-collection-container clearfix">
.....
</div>
<div class="field-collection-container clearfix">
.....
</div>
$('.field-collection-container .field-items .field-item').addClass(function () {
return $(this).text() === "1" ? "one-class" : "another-class";
});
Note that you do not need .each() at all.
You could use $.trim($(this).text()) if you expect spaces to be present.
jQuery.each($('.field-collection-container .field-items .content .field-item'), function (i, obj) {
if($(this).text() == "1"){
$(this).addClass("someclass");
}else if($(this).text() == "0"){
$(this).addClass("anotherClass");
}
});
Working Example http://jsfiddle.net/P9meu/
Check this sample on jsFiddle
http://jsfiddle.net/vijaypatel/Q2GHV/
$(function () {
$('.field-collection-container').each(function (index, obj) {
$(this).find('.field-items .content .field-item').each(function (index, obj) {
alert($(this).text());
if ($(this).text() == '1') {
$(this).prop('class','One');
} else {
$(this).prop('class','Zero');
}
});
});
});
Above code is woroking fine with multiple "field-collection-container" and also modify odd even elements
<div class="field-items">
<div class="field-item even">
<div class="field-collection-view clearfix view-mode-full field-collection-view-final">
<div class="entity entity-field-collection-item field-collection-item-field-interview-feeling clearfix" about="/dtesthkinterview/field-collection/field-interview-feeling/4" typeof="">
<div class="content">
<div class="field field-name-field-19 field-type-list-boolean field-label-above">
<div class="field-label">TEXT</div>
<div class="field-items">
<div ***id="id1"*** class="field-item even">1</div>
</div>
Instead of calling like this
$(document).ready(function () {
jQuery.each($('.field-collection-container'), function (i, obj) {
alert($(this).find('.field-items .content .field-item').text());
})
});
u can use id for a div and call like this
$(document).ready(function () {
{
var t=$("#id").text();
alert(t);
if(t==1)
{
$("#id1").addClass(".classname");
}
else
{
if(t==0)
{
$("#id1").addClass(".anotherclassname");
}
}
})
Please find the below code and i hope it solves your problem
$("div.content").find("div.field-item").each(function () {
if ($(this).html() == 1)
$(this).addClass("evenDivClass");
else if ($(this).html() == 0)
$(this).addClass("oddDivClass");
});
If you really only want the alternating fielditem divs in different classes you could try
$.each($(".field-item").find(".even"), function(i,o){ if(o.textContent==="1") $(o).addClass("some"); if(o.textContent==="0") $(o).addClass("other");)
Which is short and fast.
Here is an example of a javascript solution
var fieldItems = document.querySelectorAll(".field-collection-container .field-item");
Array.prototype.forEach.call(fieldItems, function (fieldItem) {
var text = fieldItem.textContent.trim();
if (text === "0") {
fieldItem.className += " Zero";
} else if (text === "1") {
fieldItem.className += " One";
}
});
On jsfiddle