Div Button hide not working properly in this code - javascript

Here i have two row, in that two row i have two button.
First Button
<button class="button button4 prlstbtn changedBTN" onclick="checkvalidlogin('10','0','Raju','9090909090','',' Lakshmi Layout','....#gmail.com','')" style="padding-left: 0px;padding-right: 0px;display: none">Viewed</button>
Second Button
<button class="button button4 prlstbtn changeBTN" onclick="checkvalidlogin('10','0','Raju','9090909090','',' Lakshmi Layout','....#gmail.com','')" style="padding-left: 0px;padding-right: 0px;">
Contact
Bulider</button>
My requirement is suppose i clicked the Contact Bulider button means i want hide this button ,i want to show Viewed button.
function checkvalidlogin(property_id, postedCustomerId, fullName, contactNumber, house, sublocality, emailId, excat_address) {
var $list = $(this).closest(".prptylsttNew ");
id = $list.find(".changeBTN").hide();
console.log(id)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row box adjust prptylsttNew rentLoopListing" style=" margin-left:15px;margin-right:9px;padding: 10px;background-color:#fff;">
<div class="col-md-4 mgb">
<img src="uploads/toletlist.jpg" class="img-thumbnail" height="150" width="100%" alt="No Image" onclick="rentlist_loginnn('10')">
</div>
<div class="col-md-8" style="text-align: -webkit-center;">
<div style="background-color: #fff;padding: 12px;">
<h4 style="margin-top: 0px;" class="hov">1 RK Apartment for Rent in Marathahalli</h4>
<input type="hidden" value="10" class="propertyId">
</div>
<hr style="margin-top: 0px;margin-bottom: 0px;border-color: rgba(0, 0, 0, 0.23);">
<div style="background-color:#fff;padding:12px;">
<div class="row">
<div class="col-md-4" style="padding-left: 0px;padding-right: 0px;">
<h5 style="margin-top: 0px;">Rent: <span><i class="fa fa-inr" aria-hidden="true"></i></span> 7976 </h5>
</div>
<div class="col-md-4" style="padding-left: 0px;padding-right: 0px;">
<h5 style="margin-top: 0px;"> Fully-Furnished</h5>
</div>
<div class="col-md-4" style="padding-left: 0px;padding-right: 0px;">
<h5 style="margin-top: 0px;">-Square feet </h5>
</div>
</div>
</div>
<div class="row prptylstt">
<div class="col-md-5 col-sm-6 col-xs-6">
<button class="button button3"> View Details</button>
</div>
<div class="col-md-1"> </div>
<div class="col-md-6 col-sm-6 col-xs-6">
<button class="button button4 prlstbtn changedBTN" onclick="checkvalidlogin('10','0','Raju','9090909090','',' Lakshmi Layout','....#gmail.com','')" style="padding-left: 0px;padding-right: 0px;display: none">Viewed</button>
<button class="button button4 prlstbtn changeBTN" onclick="checkvalidlogin('10','0','Raju','9090909090','',' Lakshmi Layout','....#gmail.com','')" style="padding-left: 0px;padding-right: 0px;">
Contact
Bulider</button>
</div>
</div>
</div>
</div>
<div class="row box adjust prptylsttNew rentLoopListing" style=" margin-left:15px;margin-right:9px;padding: 10px;background-color:#fff;">
<div class="col-md-4 mgb">
<img src="uploads/toletlist.jpg" class="img-thumbnail" height="150" width="100%" alt="No Image" onclick="rentlist_loginnn('9')">
</div>
<div class="col-md-8" style="text-align: -webkit-center;">
<div style="background-color: #fff;padding: 12px;">
<h4 style="margin-top: 0px;" class="hov">2 BHK Individual House for Rent in Marathahalli</h4>
<input type="hidden" value="9" class="propertyId">
</div>
<hr style="margin-top: 0px;margin-bottom: 0px;border-color: rgba(0, 0, 0, 0.23);">
<div style="background-color:#fff;padding:12px;">
<div class="row">
<div class="col-md-4" style="padding-left: 0px;padding-right: 0px;">
<h5 style="margin-top: 0px;">Rent: <span><i class="fa fa-inr" aria-hidden="true"></i></span> 8000 </h5>
</div>
<div class="col-md-4" style="padding-left: 0px;padding-right: 0px;">
<h5 style="margin-top: 0px;"> Semi-Furnished</h5>
</div>
<div class="col-md-4" style="padding-left: 0px;padding-right: 0px;">
<h5 style="margin-top: 0px;">-Square feet </h5>
</div>
</div>
</div>
<div class="row prptylstt">
<div class="col-md-5 col-sm-6 col-xs-6">
<button class="button button3"> View Details</button>
</div>
<div class="col-md-1"> </div>
<div class="col-md-6 col-sm-6 col-xs-6">
<button class="button button4 prlstbtn changedBTN" onclick="checkvalidlogin('9','7','Sarvan','8277904354','',' Lakshmi Layout','....#gmail.com','')" style="padding-left: 0px;padding-right: 0px;display: none">Viewed</button>
<button class="button button4 prlstbtn changeBTN" onclick="checkvalidlogin('9','7','Sarvan','8277904354','',' Lakshmi Layout','....#gmail.com','')" style="padding-left: 0px;padding-right: 0px;">
Contact
Bulider</button>
</div>
</div>
</div>
</div>


The problem is that var $list = $(this) the code dont know what this refers to.
I've changed your function to this:
function checkvalidlogin(property_id, postedCustomerId, fullName, contactNumber, house, sublocality, emailId, excat_address, obj) {
var $list = $(obj).parents(".prptylsttNew");
$list.find(".changeBTN").hide();
}
Now your buttons look like:
<button class="button button4 prlstbtn changedBTN" onclick="checkvalidlogin('10','0','Raju','9090909090','',' Lakshmi Layout','....#gmail.com','', this)" style="padding-left: 0px;padding-right: 0px;display: none">Viewed</button>
Added this to the end of your click event
'...#gmail.com','', this)
^^^^
function checkvalidlogin(property_id, postedCustomerId, fullName, contactNumber, house, sublocality, emailId, excat_address, obj) {
var $list = $(obj).parents(".prptylsttNew");
$list.find(".changeBTN").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row box adjust prptylsttNew rentLoopListing" style=" margin-left:15px;margin-right:9px;padding: 10px;background-color:#fff;">
<div class="col-md-4 mgb">
<img src="uploads/toletlist.jpg" class="img-thumbnail" height="150" width="100%" alt="No Image" onclick="rentlist_loginnn('10')">
</div>
<div class="col-md-8" style="text-align: -webkit-center;">
<div style="background-color: #fff;padding: 12px;">
<h4 style="margin-top: 0px;" class="hov">1 RK Apartment for Rent in Marathahalli</h4>
<input type="hidden" value="10" class="propertyId">
</div>
<hr style="margin-top: 0px;margin-bottom: 0px;border-color: rgba(0, 0, 0, 0.23);">
<div style="background-color:#fff;padding:12px;">
<div class="row">
<div class="col-md-4" style="padding-left: 0px;padding-right: 0px;">
<h5 style="margin-top: 0px;">Rent: <span><i class="fa fa-inr" aria-hidden="true"></i></span> 7976 </h5>
</div>
<div class="col-md-4" style="padding-left: 0px;padding-right: 0px;">
<h5 style="margin-top: 0px;"> Fully-Furnished</h5>
</div>
<div class="col-md-4" style="padding-left: 0px;padding-right: 0px;">
<h5 style="margin-top: 0px;">-Square feet </h5>
</div>
</div>
</div>
<div class="row prptylstt">
<div class="col-md-5 col-sm-6 col-xs-6">
<button class="button button3"> View Details</button>
</div>
<div class="col-md-1"> </div>
<div class="col-md-6 col-sm-6 col-xs-6">
<button class="button button4 prlstbtn changedBTN" onclick="checkvalidlogin('10','0','Raju','9090909090','',' Lakshmi Layout','....#gmail.com','', this)" style="padding-left: 0px;padding-right: 0px;display: none">Viewed</button>
<button class="button button4 prlstbtn changeBTN" onclick="checkvalidlogin('10','0','Raju','9090909090','',' Lakshmi Layout','....#gmail.com','', this)" style="padding-left: 0px;padding-right: 0px;">
Contact
Bulider</button>
</div>
</div>
</div>
</div>
<div class="row box adjust prptylsttNew rentLoopListing" style=" margin-left:15px;margin-right:9px;padding: 10px;background-color:#fff;">
<div class="col-md-4 mgb">
<img src="uploads/toletlist.jpg" class="img-thumbnail" height="150" width="100%" alt="No Image" onclick="rentlist_loginnn('9')">
</div>
<div class="col-md-8" style="text-align: -webkit-center;">
<div style="background-color: #fff;padding: 12px;">
<h4 style="margin-top: 0px;" class="hov">2 BHK Individual House for Rent in Marathahalli</h4>
<input type="hidden" value="9" class="propertyId">
</div>
<hr style="margin-top: 0px;margin-bottom: 0px;border-color: rgba(0, 0, 0, 0.23);">
<div style="background-color:#fff;padding:12px;">
<div class="row">
<div class="col-md-4" style="padding-left: 0px;padding-right: 0px;">
<h5 style="margin-top: 0px;">Rent: <span><i class="fa fa-inr" aria-hidden="true"></i></span> 8000 </h5>
</div>
<div class="col-md-4" style="padding-left: 0px;padding-right: 0px;">
<h5 style="margin-top: 0px;"> Semi-Furnished</h5>
</div>
<div class="col-md-4" style="padding-left: 0px;padding-right: 0px;">
<h5 style="margin-top: 0px;">-Square feet </h5>
</div>
</div>
</div>
<div class="row prptylstt">
<div class="col-md-5 col-sm-6 col-xs-6">
<button class="button button3"> View Details</button>
</div>
<div class="col-md-1"> </div>
<div class="col-md-6 col-sm-6 col-xs-6">
<button class="button button4 prlstbtn changedBTN" onclick="checkvalidlogin('9','7','Sarvan','8277904354','',' Lakshmi Layout','....#gmail.com','', this)" style="padding-left: 0px;padding-right: 0px;display: none">Viewed</button>
<button class="button button4 prlstbtn changeBTN" onclick="checkvalidlogin('9','7','Sarvan','8277904354','',' Lakshmi Layout','....#gmail.com','', this)" style="padding-left: 0px;padding-right: 0px;">
Contact
Bulider</button>
</div>
</div>
</div>
</div>

Related

Multiple div shown on the add button click how to delete the same div through the delete button

var count = 2;
var countMax = 5;
function adddt() {
if (count > countMax)
return;
document.getElementById('dt-' + count + '').style.display = 'block';
count++;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btn1" onclick="adddt()"><i class="fa fa-plus"></i></button> </div>
<div class="row" id="dt-1" style="display: none;">
<div class="col-12" style="height: 40px;"></div>
<div class="col-md-12">
<div class="form-group">
<div class="col-12 col-sm-3">
<label for=""></label>
</div>
<div class="col-12 col-md-6 Option">
<textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea>
</div>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btnminus1"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
<div class="row" id="dt-2" style="display: none;">
<div class="col-12" style="height: 40px;"></div>
<div class="col-md-12">
<div class="form-group">
<div class="col-12 col-sm-3">
<label for=""></label>
</div>
<div class="col-12 col-md-6 Option">
<textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea>
</div>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btnminus1"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
<div class="row" id="dt-3" style="display: none;">
<div class="col-12" style="height: 40px;"></div>
<div class="col-md-12">
<div class="form-group">
<div class="col-12 col-sm-3">
<label for=""></label>
</div>
<div class="col-12 col-md-6 Option">
<textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea>
</div>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btnminus1"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
I am using the above code to show multiple divs one by one by clicking on the 'add' button. Now I want to hide the same divs when I click on the delete or minus button. Requesting you please guide how can I solve this. I tried using the show hide method but it would not work for me. Thanks in advance.

you can do like this
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btn1" onclick="adddt()"><i class="fa fa-plus"></i></button> </div>
<div class="row" id="dt-1" style="display: none;">
<div class="col-12" style="height: 40px;"></div>
<div class="col-md-12">
<div class="form-group">
<div class="col-12 col-sm-3">
<label for=""></label>
</div>
<div class="col-12 col-md-6 Option">
<textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea>
</div>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btnminus1" onclick="deletdt(1)"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
<div class="row" id="dt-2" style="display: none;">
<div class="col-12" style="height: 40px;"></div>
<div class="col-md-12">
<div class="form-group">
<div class="col-12 col-sm-3">
<label for=""></label>
</div>
<div class="col-12 col-md-6 Option">
<textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea>
</div>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btnminus1" onclick="deletdt(2)"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
<div class="row" id="dt-3" style="display: none;">
<div class="col-12" style="height: 40px;"></div>
<div class="col-md-12">
<div class="form-group">
<div class="col-12 col-sm-3">
<label for=""></label>
</div>
<div class="col-12 col-md-6 Option">
<textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea>
</div>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btnminus1" onclick="deletdt(3)"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
</body>
<script>
var count = 1;
var countMax = 3;
function adddt() {
if(count > countMax)
return;
document.getElementById('dt-' + count + '').style.display = 'block';
count++;
}
function deletdt(id)
{
document.getElementById('dt-' + id + '').style.display = 'none';
}
</script>
</html>

function delete() {
if(count > countMax)
return;
document.getElementById('dt-' + count + '').style.display = 'none';
count++;
}
if you change value to "display: none;" instead of "display: block;" it will work.

Onclick event not working properly

Basically I am trying to use an onclick event to change an image source when image 2 button is clicked. When the image furthest right of the section is clicked, a modal will pop up. In that modal, there are two buttons down at the bottom. Image one button is intended to display the original image, and image two is intended to display a different image. Not sure what is wrong in my code, I can't see anything that I am forgetting. Or maybe I am just doing it completely wrong in the first place, help would be much appreciated.
.mDialogPhoto {
width: 95%;
display: block;
margin-left: auto;
margin-right: auto;
}
.modal-body {
padding: 0px;
}
.modal-backdrop.in {
opacity: 0.8;
}
.modal-content {
background-color: white;
}
.img-responsiveModal {
margin-top: 20px;
margin-bottom: 20px;
display: block;
width: 100%;
height: auto;
}
.modal-dialog {
margin-top: 50px;
}
<section class="contentThree">
<div class="container-fluid custom">
<div class="row">
<div class="col-md-12 hidden-xs hidden-sm">
<h2 class="text-center photographyTitle">Shop</h2>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog mDialogPhoto" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 modal3ImgPrev">
<img class="img-responsiveModal" id="myImg" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg'/>
</div>
<div class="paypal col-md-3">
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="D9FWAKHUPWYXS">
<table>
<tr><td><input type="hidden" name="on0" value="Choose Size">Choose Size</td></tr><tr><td><select class="float-right" name="os0">
<option value="Size One">Size One $100.00 USD</option>
<option value="Size Two">Size Two $200.00 USD</option>
<option value="Size Three">Size Three $300.00 USD</option>
<option value="Size Four">Size Four $400.00 USD</option>
</select> </td></tr>
</table>
<input type="hidden" name="currency_code" value="USD">
<input class="paymentBtn1" type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
</div>
<div class="row">
<button onclick="document.getElementById('myImg')src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg'">Image 1</button>
<button onclick="document.getElementById('myImg')src='/CMS_Static/Uploads/313864614C6F6F/DJI_0073-Recovered.jpg'">Image 2</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2 col-md-offset-0 col-md-4 photoBG">
<a type="button" data-toggle="modal" data-target="#myModal1"><img class="img-responsive center-block" src='/CMS_Static/Uploads/313864614C6F6F/photoImage1-1.jpg'/></a>
</div>
<div class="col-sm-8 col-sm-offset-2 col-md-offset-0 col-md-4 photoBG">
<a type="button" data-toggle="modal" data-target="#myModal2"><img class="img-responsive center-block" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0073-Recovered.jpg'/></a>
</div>
<div class="col-sm-8 col-sm-offset-2 col-md-offset-0 col-md-4 photoBG">
<a type="button" data-toggle="modal" data-target="#myModal3"><img class="img-responsive center-block" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg'/></a>
</div>
</div>
<div class="col-md-4 col-md-offset-4 hidden-xs hidden-sm">
<a class="btn defaultBtn btn-block" href="/videography#photography">View More</a>
</div>
<div class="col-sm-8 col-sm-offset-2 visible-xs visible-sm">
<a class="btn defaultBtn btn-block" href="/videography#photography">View Photos</a>
</div>
</div>
</div>
</section>

You need a dot before the src, its a property of the getElementById() method.
document.getElementById('myImg').src =
'/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg';

Bootstrap Column filter using Javascript

I have a bootstrap columns as below (4 columns per row and many rows likewise), I need to filter the columns based on the label (General,Movie,Drama,etc...), something like this http://codepen.io/bmodena/pen/Fybdu . I need a javascript to do this. I can change the HTML code also as if required. I am kind of very beginner to JS.
Please help
<div class="col-sm-8" style="padding-left:0px;">
<div class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title" style="font-size:20px;">Things</h1>
</div><br>
<div class="panel-body">
<div class="row" style="padding:10px;">
<div class="col-xs-5 col-sm-3 col-md-3">
<img src="/media/item1.jpg" class="img-responsive" alt="Image">
<br><p><b>Item1</b>
<br><span class="label label-success">Gereral</span>
</p>
</div>
<div class="col-xs-5 col-sm-3 col-md-3">
<img src="/media/item2.jpg" class="img-responsive" alt="Image">
<br><p><b>item2</b>
<br><span class="label label-success">Movie</span>
</p>
</div>
<div class="col-xs-5 col-sm-3 col-md-3">
<img src="/media/item3.jpg" class="img-responsive" alt="Image">
<br><p><b>items3</b>
<br><span class="label label-success">Gereral</span>
</p>
</div>
<div class="col-xs-5 col-sm-3 col-md-3">
<img src="/media/item4.jpg" class="img-responsive" alt="Image">
<br><p><b>items4</b>
<br><span class="label label-success">Drama</span>
</p>
</div>
</div><br>
<div class="row">
<div class="col-xs-5 col-sm-3 col-md-3">
<img src="/media/item5.jpg" class="img-responsive" alt="Image">
<br><p><b>items5</b>
<br><span class="label label-success">NEWS</span>
</p>
</div>
</div>
</div>
</div>

It should be simple using jQuery. Use selector to hide and show.
<div class="col-sm-8" style="padding-left:0px;">
<div class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title" style="font-size:20px;">Things</h1>
</div>
<br>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-info" data-set="all">All</button>
<button class="btn btn-info" data-set="general">General</button>
<button class="btn btn-info" data-set="movie">Movie</button>
<button class="btn btn-info" data-set="news">News</button>
<button class="btn btn-info" data-set="drama">Drama</button>
</div>
</div>
<hr/>
<div class="row" style="padding:10px;">
<div class="col-xs-5 col-sm-3 col-md-3" data-group="general">
<img src="/media/item1.jpg" class="img-responsive" alt="Image">
<a href="/items1">
<br>
<p><b>Item1</b></a>
<br><span class="label label-success">Gereral</span>
</div>
<div class="col-xs-5 col-sm-3 col-md-3" data-group="movie">
<img src="/media/item2.jpg" class="img-responsive" alt="Image">
<a href="/items2">
<br>
<p><b>item2</b></a>
<br><span class="label label-success">Movie</span>
</div>
<div class="col-xs-5 col-sm-3 col-md-3" data-group="general">
<img src="/media/item3.jpg" class="img-responsive" alt="Image">
<a href="/items3">
<br>
<p><b>items3</b></a>
<br><span class="label label-success">Gereral</span>
</div>
<div class="col-xs-5 col-sm-3 col-md-3" data-group="drama">
<img src="/media/item4.jpg" class="img-responsive" alt="Image">
<a href="/items4">
<br>
<p><b>items4</b></a>
<br><span class="label label-success">Drama</span>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-5 col-sm-3 col-md-3" data-group="news">
<img src="/media/item5.jpg" class="img-responsive" alt="Image">
<a href="/items">
<br>
<p><b>items5</b></a>
<br><span class="label label-success">NEWS</span>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(e) {
$("[data-set]").click(function(e) {
if (this.dataset.set == "all") {
$("[data-group]").show();
return false;
}
var $currentLists = $("[data-group=" + this.dataset.set + "]");
$("[data-group]").not($currentLists).hide();
$currentLists.show();
});
});
</script>
jsfiddle link

Change the background color of nth child in every parent DIV

I have HTML as shown below. Using CSS, I want to change the background-color of nth child div of every div. If I click on the first More Info button I want to change the color of first child div of every div and so on.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
HTML :
<div class="row" id="empListTable">
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-weight:bold">
Hired
</div>
<div class="col-xs-6 col-sm-3"style="padding-left: 25px;font-weight:bold">
Screened
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 15px;font-weight:bold">
Pre-Qualified
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-weight:bold">
Approved
</div>
</div>
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold">
10
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold">
10
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold">
6
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold">
2
</div>
</div>
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-sm-3" style="font-size:12px;color:#888;">
Total Number of <br /> Employees hired
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Employees screened <br /> via phone or web
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Via Screened <br />employees
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Employees have <br />recieved tax credits
</div>
</div>
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-sm-3" style="font-size:8px">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
</div>
</div>

So first, you get the index of the clicked button using the index method, then you can use the nth-child selector to change the background color.
View the solution in full screen mode to see what is happening
var index = 1;
$(".button-container button").on('click', function(){
// this will tell you which index you clicked
$('.to-change div:nth-child('+index+')').css('background-color', 'white');
index = $(this).index('button') + 1;
$('.to-change div:nth-child('+index+')').css('background-color', 'red');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" id="empListTable">
<div class="form-group to-change col-md-12" style="padding-left: 35px;">
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-weight:bold">
Hired
</div>
<div class="col-xs-6 col-sm-3"style="padding-left: 25px;font-weight:bold">
Screened
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 15px;font-weight:bold">
Pre-Qualified
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-weight:bold">
Approved
</div>
</div>
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold">
10
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold">
10
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold">
6
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold">
2
</div>
</div>
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-sm-3" style="font-size:12px;color:#888;">
Total Number of <br /> Employees hired
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Employees screened <br /> via phone or web
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Via Screened <br />employees
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Employees have <br />recieved tax credits
</div>
</div>
<div class="form-group col-md-12 button-container" style="padding-left: 35px;">
<div class="col-sm-3" style="font-size:8px">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
</div>
</div>

Since you are using AngularJS, you can add ng-style and modify your ng-click to change the div that you want to change. To change the background of the numbers in the corresponding column of your bootstrap row when you click the more info button:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div class="row" id="empListTable" ng-app="">
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-weight:bold">
Hired
</div>
<div class="col-xs-6 col-sm-3"style="padding-left: 25px;font-weight:bold">
Screened
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 15px;font-weight:bold">
Pre-Qualified
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-weight:bold">
Approved
</div>
</div>
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold" ng-style="col0">
10
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold" ng-style="col1">
10
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold" ng-style="col2">
6
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold" ng-style="col3">
2
</div>
</div>
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-sm-3" style="font-size:12px;color:#888;">
Total Number of <br /> Employees hired
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Employees screened <br /> via phone or web
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Via Screened <br />employees
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Employees have <br />recieved tax credits
</div>
</div>
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-sm-3" style="font-size:8px">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="col0={'background-color':'red'}">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="col1={'background-color':'blue'}">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="col2={'background-color':'green'}">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="col3={'background-color':'yellow'}">More Info <i class="fa fa-arrow-down"></i></button>
</div>
</div>
Go to angular ng-style for more examples.

If you want to do the nth child and ensure that its only divs you use this selector:
div:nth-of-type(2) {
background-color: red;
}
div {
min-height: 200px;
}
div > div {
background-color: blue;
}
div > div:nth-of-type(2) {
background-color: red;
}
<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>

You can use CSS3 nth-child() selector.
.parent > div:nth-child(1)
{
background-color: blue;
}
For more reference, go here.
div
{
height: 50px;
background: gray;
}
.parent > div:nth-child(1)
{
background: blue;
}
<div class="parent">
<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
<div>div 4</div>
</div>

Angularjs - wrong behavior when remove item from ng-repeat

In the code below I'm trying to delete rows. There are two level of rows, to remove the inner level I simply use:
$scope.remove = function(array, index, parent, parent_index){
array.splice(index, 1);
if(array.length==0){
parent.splice(parent_index, 1);
}
}
Removing the inner row is working as expected but the outter row never get deleted.
Even if i change the code to try delete the outter row only the inner row disappear which it blows my mind. What is going wrong?
$scope.remove = function(array, index, parent, parent_index){
if(array.length==1){
parent.splice(parent_index, 1);
}
}
HTML code
<v-accordion id="subNestedAccordionB">
<v-pane class="hidePane" ng-repeat="child in item.investmentProposalGrouping"
ng-init="nivel3index = $index" expanded="isExpanded" id="{{ ::child.id }}">
<v-pane-header id="{{ child.id }}-header" aria-controls="{{ child.id }}-header"
class="hide-header">
<h5>
<div class="row hide">
<div class="item-accordion sub-item item-text-wrap col col-20">
{{child.agrupacionDesc}}
</div>
<div class="col col-10"></div>
<div class="col col-10"></div>
<div class="col col-10"></div>
<div class="col col-10"></div>
<div class="col col-10">{{child.agrupacionSaldo | number:2}}</div>
<div class="col col-10">{{child.agrupacionPcrt | number:2}} %</div>
<div class="col col-10"></div>
<div class="col col-10"></div>
</div>
</h5>
</v-pane-header>
<v-pane-content id="{{ child.id }}-content" aria-labelledby="{{ child.id }}-content">
<ul>
<li ng-repeat="distrib in child.distribucion" class="li_product">
<div class="productLink">
<div class="row">
<div style="margin-top: 10px;" class="col col-20 productIndent">
{{distrib.producto.nombreProducto}}
</div>
<div style="margin-top: 10px;" class="col col-10">{{distrib.producto.reqProducto}}
</div>
<div style="margin-top: 10px;" class="col col-10">
{{distrib.producto.iLiquidezProducto}}
</div>
<div style="margin-top: 10px;" class="col col-10">{{distrib.producto.cotizacion |
number:2}}
</div>
<div style="margin-top: 10px;" class="col col-10">{{distrib.producto.numTitulos |
number:2}}
</div>
<!--<<<<<<< HEAD-->
<!--<div class="col col-10 bold" id="producto-{{distrib.producto.idProducto}}">{{distrib.saldo | number:2}}<span ng-click="modal2.show();pasarImporte(child.distribucion, $index)">O</span></div>-->
<!--<div class="col col-10">{{distrib.saldoPcrt | number:2}} %</div>-->
<!--=======-->
<div style="margin-top: 10px;"
ng-if="(isDiscreccional($parent.$parent.$parent.group.agrupacionTipo)==false)"
class="col col-10">{{distrib.saldo | number:2}}
</div>
<div ng-if="(isDiscreccional($parent.$parent.$parent.group.agrupacionTipo)==true)"
class="col col-10">
<img src="img/updown.png"
style=" margin-top: 9px;width: 15px; margin-left: 5px; float: left;"
ng-click="modal3.show();pasarImporte(child.distribucion, $index);"
value="C"/>
<input style=" float: left;width: 59%;text-align: right;"
id="producto-{{distrib.producto.idProducto}}"
ng-change="changeProductPrice(distrib.producto.idProducto)" type="number"
ng-model="distrib.saldo"/>
<span style=" float: left;margin-top: 10px;">{{distrib.producto.divisaProducto}}</span>
</div>
<!--<div ng-if="(isDiscreccional($parent.$parent.$parent.group.agrupacionTipo)==true)" class="col col-10">
<input style="float: left;width: 89%;" type="number" ng-model="distrib.saldoPcrt" disabled />
<span style="float: left;margin-top: 10px;">%</span>
</div>-->
<div style="margin-top: 10px;" class="col col-10">{{distrib.saldoPcrt | number:2}}
</div
<div style="margin-top: 10px;" style="text-align: center;" class="col col-10">
{{showaAndSaveVariation(Initials, distrib.saldo, nivel1index, nivel2index,
nivel3index, $index) | number:2}}
</div>
<!--
<div class="col col-10"><input text="text" ng-model="distrib.producto.saldo"/> €</div>
<div class="col col-10"><input text="text" ng-model="distrib.producto.saldoPcrt"/></div>-->
<!--<div class="col col-10">{{distrib.producto.comDistribucion + distrib.producto.comGestion | number:2}}</div>-->
<div style="margin-top: 10px;" class="col col-10"><img src="img/closeWindow.png"
ng-click="remove(child.distribucion, $index,item.investmentProposalGrouping, nivel3index)">
</div>
</div>
</div>
</li>
</ul>
</v-pane-content>
</v-pane>
</v-accordion>
This is the model:
{
hashKey: "object:180"
agrupacionDesc: "Alternativo"
agrupacionId: "IN"
agrupacionPcrt: 0.00014727422522060096
agrupacionSaldo: 3.05
investmentProposalGrouping:[
{
$$hashKey: "object:195"
agrupacionDesc: "Alternativo"
agrupacionId: "IN"
agrupacionPcrt: 0.00014727422522060096
agrupacionSaldo: 3.05
distribucion: [
{
$$hashKey: "object:204"
producto: Object
saldo: 3.05
saldoPcrt: 0.00014727422522060096
}
]
]
}

Categories

Resources