Hello I'm quite new with jquery and I can't get something to work.
I'm trying to transform a div with a .click function:
JQUERY
$(document).ready(function(){
$('#show').click(function(){
$('.element', this).toggleClass('hidden');
$(".change-width", this).toggleClass(' col-md-12 ');
$(".change-width", this).toggleClass('col-md-3');
$(".blok", this).toggleClass('same-height').toggleClass('h100');
if($(this).hasClass('SeeMore2')){
$(this).html('<i class="fa fa-angle-double-left" aria-hidden="true"></i> Terug naar overzicht');
} else {
$(this).html('Lees meer <i class="fa fa-angle-double-right" aria-hidden="true"></i>');
}
});
});
HTML:
<div class="blokk change-width col-md-3 ">
<div class="blok same-height ">
<i class="fa fa-user-md fa-4x" aria-hidden="true"></i>
<h3>Hoofdpijn</h3>
<img class="element hidden" src="../images/behandelingen/headache.jpg">
<p>text</p>
<p class="element hidden">text</p>
</div>
<button id="show" onclick="fastScroll(document.getElementById('navigationz'))">Lees meer <i class="fa fa-angle-double-right" aria-hidden="true"></i></button>
</div>
Somehow it works without the ,this selector but without the ,this it will select all divs which i obviously don't want.
Can anyone tell me what I'm doing wrong?
Thanks in advance :)
I don't believe $('.element', this) is valid syntax.
Alternatively, you're supposed to orient your DOM selectors relative to $(this) like a tree traversal. For example, in your situation, $(this) references the button with an id of show (because it is attached to the click handler).
Therefore, to access .change-width, you need to access the parent of $(this). In other words, replace
$(".change-width", this).toggleClass(' col-md-12 ');
with
$(this).parent(".change-width").toggleClass(' col-md-12 ');
As another example, if you want to access .blok, find the relationship between that element and $(this). .block is the previous sibling of this element. Therefore replace
$(".blok", this).toggleClass('same-height').toggleClass('h100');
with
$(this).prev(".blok").toggleClass('same-height').toggleClass('h100');
And finally, you want to access .element. I see that you have 2 .elements, and that both of them are children of .blok. In other words, .elements are the children of the previous sibling of $(this). Therefore replace
$('.element', this).toggleClass('hidden');
with
$(this).prev(".blok").children(".element").toggleClass('hidden');
Here are some jQuery documentation regarding these functions:
https://api.jquery.com/category/traversing/tree-traversal/
Related
I have a grid of staff in divs on a page and within each div i have added a new 'filter-content' div which contains the ids of various criteria that apply to this member of staff. Such as 'specialisms', 'region', 'joblevel' etc.
Here is my mark up:
foreach (SearchFirmRecruiter searchFirmRecruiter in Model.OrderBy(o => o.LastName))
{
bool blnUserDeactivated = searchFirmRecruiter.DateRemoved.HasValue;
string strCipher = #searchFirmRecruiter.getSearchFirmRecruiterCipherId();
<div class="col-md-4">
<div class="panel panel-default text-center #(blnUserDeactivated ? "deactivated" : "")">
<div class="panel-body">
<i class="fa fa-user-circle-o fa-3x"></i>
<p class="h4"><b>#searchFirmRecruiter.FirstName #searchFirmRecruiter.LastName</b></p>
<div class="filter-content">
<p class="specialisms"><b>#searchFirmRecruiter.Specialism</b></p>
<p class="regions"><b>#searchFirmRecruiter.Regions</b></p>
<p class="supplierType"><b>#searchFirmRecruiter.SupplierType</b></p>
<p class="jobLevel"><b>#searchFirmRecruiter.JobLevel</b></p>
</div>
<p>#searchFirmRecruiter.Email</p>
#if (blnUserDeactivated)
{
//Set the value
blnShowDisabledRecruitersLink = true;
<a data-href="#Url.Content("~")SearchFirm/ActivateRecruiter/#searchFirmRecruiter.getSearchFirmRecruiterCipherId()" data-toggle="confirmation" data-btn-ok-icon="fa fa-check" data-btn-cancel-icon="fa fa-remove" data-container="body" data-placement="top" class="btn btn-sm btn-success"><i class="fa fa-check margin-right-spacing"></i>Enable</a>
}
else
{
<i class="fa fa-pencil margin-right-spacing"></i>Edit
<span data-toggle="tooltip" data-placement="bottom" data-container="body" data-trigger="hover" title="" data-original-title="This user will no longer be able to access their jobs and submit any candidates"><a data-href="#Url.Content("~")SearchFirm/DeactivateRecruiter/#strCipher" data-toggle="confirmation" data-btn-ok-icon="fa fa-check" data-btn-cancel-icon="fa fa-remove" data-placement="top" class="btn btn-sm btn-danger"><i class="fa fa-remove margin-right-spacing"></i>Disable</a></span>
}
</div>
</div>
</div>
}
On the page the filter-content div looks like this:
,19,17,25,
,6,9,12,16,19,
,1,
,1,2,4,
Down the left hand side of the page i have some filter options, one for each of the classes above. So these will list all the 'specialisms', 'regions' etc as checkboxes. When a filter checkbox is selected i am running a javascript function to filter for that filter type. So, for example, if a user selects the 'Accountancy' specialism and that is id 25. I want to only show the members of staff that have that 'Accountancy' specialism.
As the filters are clicked so the members of staff will be shown if they meet the criteria.
I am completely new to JQuery but i'm pretty sure this is the best way to achieve what i want.
I have a javascript function for each filter which passes in the selected filter value, within this funtion, ideally, i want to firstly hide all the divs and then show only the ones that match the filter criteria. At the moment i am just playing around with trying to return the specialisms, once i have those i can do some logic to determine if the passed in specialismId is contained and therefore whether this member of staff should be shown or not
function filterSpecialism(specialismId) {
alert(specialismId);
alert($(".filter-content").find('p').find('specialisms').val)
}
Here is an image of how the page currently looks, so within this example Accountancy is selected as the filter, this is specialism id 25 so only James Dibner and Harjinder Royston should be shown
example
I hope that all make sense and i appreciate any answers or suggestions. Many thanks all
I have looked and I still can not figure out how to copy a <p> class named "booking-item-header-price" to the <div> named "myDiv" (basically cloning the <p> to the <div> with JavaScript. It might be important to note that the contents of the <p> class changes based on the price of the item. I have tried some things on JSFiddle but to no avail. Any help would be appreciated.
<p class="booking-item-header-price">
<small>Price</small>
<span class=" onsale">$70.00</span>
<i class="fa fa-long-arrow-right"></i>
<span class="text-lg">$56.00</span>/day
</p>
<div id="myDiv"></div>
If you are wanting to move the element: call appendChild() on the parent element you want to add the element to (#myDiv) with a reference to the element you want to move, your <p> element.
var parent = document.querySelector("#myDiv");
var child = document.querySelector(".booking-item-header-price");
parent.appendChild( child );
If you want to copy the element: use cloneNode() on the child element to make a copy before appending. Pass in true for a deep copy,
var parent = document.querySelector("#myDiv");
var child = document.querySelector(".booking-item-header-price");
parent.appendChild( child.cloneNode(true) );
Note in the copying version you will lose any event listeners you might have applied like through addEventListener()
Demo
var parent = document.querySelector("#myDiv");
var child = document.querySelector(".booking-item-header-price");
parent.appendChild( child.cloneNode(true) );
#myDiv {
padding:30px;
border:1px solid;
}
<p class="booking-item-header-price">
<small>Price</small>
<span class=" onsale">$70.00</span>
<i class="fa fa-long-arrow-right"></i>
<span class="text-lg">$56.00</span>/day
</p>
<div id="myDiv"></div>
function copy(){
document.querySelector('#myDiv').innerHTML =
document.querySelector('.booking-item-header-price').innerHTML;
}
<p class="booking-item-header-price">
<small>Price</small>
<span class=" onsale">$70.00</span>
<i class="fa fa-long-arrow-right"></i>
<span class="text-lg">$56.00</span>/day
</p>
<div id="myDiv"></div>
<button type="button" onclick="copy()">
Copy to #myDiv
</button>
This way we get the innerHTML (all the content including html tags) inside the .booking-item-header-pricep and assign it to the innerHTML of the #myDiv div.
I have CSHTML code as follows. I need to toggle a class on click, which is given in the below Javascript code.
<div class="accordion bar-heading-padding" id="#accordion2" onclick="getclassofitag(this)">
<div class="accordion-group">
<div class="accordion-heading datalist" data-toggle="collapse" data-parent="#accordion2" href="##i.Id">
#*<i class="fa fa-chevron-up table-middle icon-width" aria-hidden="false"></i>*#
<i class="fa fa-chevron-down table-middle icon-width" aria-hidden="true"></i>
<h1 class="accordion-toggle table-middle">
#Html.Raw(#i.Name)
</h1>
</div>
<div id="#i.Id" class=" collapse out">
<div class="accordion-inner">
<img ng-src="#i.ImagePath" alt="logo" class="img-thumbnail img-wrap content-image" />
<h1>#Html.Raw(#i.Name)</h1>
<h3>#Html.Raw(#i.Title)</h3>
<br />
#Html.Raw(#i.BioDetail)
</div>
</div>
</div>
</div>
and the Javascript code for toggling class of the i element.
function getclassofitag(element) {
iTags = element.getElementsByTagName("i");
iTags.classList.toggle('fa-chevron-down');
itags.classList.toggle('fa-chevron-up');
}
I want to toggle the classes of the i element (<i) on click. What code do I have to write to do that? Where did I go wrong?
document.getElementsByTagName() returns an HTMLCollection object which contains a collection of DOM objects. The collection itself does not have a .classList property (like you are trying to do). That is a property of a DOM element, not the collection object. Thus, your iTags variable does not have a .classList` property on it.
So, you need to iterate the iTags HTMLCollection and use .classList on each individual DOM element.
function getclassofitag(element) {
var item, iTags = element.getElementsByTagName("i");
for (var i = 0; i < iTags.length; i++) {
item = iTags[i];
item.classList.toggle('fa-chevron-down');
item.classList.toggle('fa-chevron-up');
}
}
Note: I also declared your iTags variable as a local variable so you aren't using an implicit global (which is a bad practice).
hope this will solve your problem
$(document).ready(function () {
$('.collapse').on('shown.bs.collapse', function () {
$(this).parent().find(".fa-chevron-down").removeClass("fa-chevron-down").addClass("fa-chevron-up");
});
$('.collapse').on('hidden.bs.collapse', function () {
$(this).parent().find(".fa-chevron-up").removeClass("fa-chevron-up").addClass("fa-chevron-down");
});
});
I'm fairly new to Javascript/Jquery and I'm trying to hide multiple children/adjacent classes when a specific parent class is clicked.
Here's my HTML
<div class="container">
<div class="row">
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small">
<i class="fa fa-clock-o"></i>
</div>
<div class="pov_title_small">
MEASURE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_large">
<i class="fa fa-map-marker"></i>
</div>
<div class="pov_title_large">
MEASURE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small">
<i class="fa fa-commenting"></i>
</div>
<div class="pov_title_small">
MEASURE
</div>
</div>
</div>
</div>
What I'm aiming to do is: When a user clicks one of the two smaller icons shown (pov_icon_small), for that individual icon: the classes pov_icon_small and pov_title_small will change to pov_icon_large and pov_title_large respectively. In the same time, I want the other 'large' icon and 'title' to revert back to the 'small' state
I've started calling some Javascript but I don't think I'm headed the right way:
$('.pov_icon_small').on('click', function (e) {
$(this).toggleClass("pov_icon_large");
});
Would anyone be willing to point me to the right direction?
To use individual click
$('.pov_icon_small , .pov_icon_large').on('click', function (e) {
$('.pov_icon_large').not($(this)).removeClass('pov_icon_large').addClass('pov_icon_small');
$(this).toggleClass("pov_icon_small").toggleClass("pov_icon_large");
});
and for title the same way
$('.pov_title_small , .pov_title_large').on('click', function (e) {
$('.pov_title_large').not($(this)).removeClass('pov_title_large').addClass('pov_title_small');
$(this).toggleClass("pov_title_small").toggleClass("pov_title_large");
});
Working Demo
To run both action on icon click use this
$('.pov_icon_small , .pov_icon_large').on('click', function () {
$('.pov_icon_large').not($(this)).removeClass('pov_icon_large').addClass('pov_icon_small');
$('.pov_title_large').not($(this).next('div[class^="pov_title_"]')).removeClass('pov_title_large').addClass('pov_title_small');
$(this).toggleClass("pov_icon_small").toggleClass("pov_icon_large");
$(this).next('div[class^="pov_title_"]').toggleClass("pov_title_small").toggleClass("pov_title_large");
});
Working Demo
Note: be sure to include Jquery
You can add a common class icon for the icon div and title for the title div and following code will work,
$(".pov_icon_small").on('click',function(){
$(this).parent().siblings().children('div').each(function(value){
if($(this).hasClass('icon'))
$(this).addClass('pov_icon_small').removeClass('pov_icon_large');
else if($(this).hasClass('title'))
$(this).addClass('pov_title_small').removeClass('pov_title_large');
});
$(this).addClass('pov_icon_large').removeClass('pov_icon_small');
$(this).siblings('.title').addClass('pov_title_large').removeClass('pov_title_small');
});
Here as you can see, I am first getting parent of the icon clicked i.e. Your pav_icon div now I am changing for all the siblings now each div in the sibling. If it is Iicon changing icon classes as required if title changing title classes.
My HTML Code is as follow :
<div class="listitems">
user1#mail.com
<a style="float: right;vertical-align: top;" data-recom-user="3" data-recom-mile="4">
<i class="icon-eye-open"></i>
</a>
<i style="float: right;vertical-align: top;" data-irecom-done="false" data-irecom-user="3" data-irecom-mile="4" class="icon-hand-up" title="Recommend this user"></i>
</div>
i have trigger click event on <a> in event handler function i want to access closest <a>
i tried $(this).closest("<i>") in this i got <i class="icon-eye-open"></i> how i can get
<i style="float: right;vertical-align: top;" data-irecom-done="false" data-irecom-user="3" data-irecom-mile="4" class="icon-hand-up" ></i>
Element so that i can change some some attributes of it.
Based on your HTML markup, you can use siblings() or next() instead:
$(this).siblings('i')
or:
$(this).next()
Also, note that closest() will traverse up the DOM tree, this method is not using to find the child elements
For getting inner anchor tag:
$(this).find("i")
For sibling:
$(this).siblings("i")
$(this).closest("<i>")
<i class="icon-eye-open"></i>
$(this).find("i .icon-hand-up")
<i style="float: right;vertical-align: top;" data-irecom-done="false" data-irecom-user="3" data-irecom-mile="4" class="icon-hand-up" ></i>
$(this).find("i .icon-hand-up").attr('','') ; // you can change the attribute
or
$(this).parent().find("i:last").attr('','');
$(document).ready(function () {
$(".listitems a").click(function () {
var sss = $(this).find('i');
alert(sss.text());
});
});