I have this html code below with the caret class fa fa-caret-down. Now I want that if the user clicks on the caret, the caret-down class shall gets removed and get replaced with the fa fa-caret-up class. And the same again, if he klicks on the caret-up class, it shall get back to the caret-down class.
( any other way is also okay ). I've tried this:
$(document).ready(function() {
$('.fa-caret-down').on('click', function () {
$(this).removeClass('fa-caret-down').addClass('fa-caret-up');
});
$(this).removeClass('fa-caret-up').addClass('fa-caret-down');
});
[ This toogle also runs very bad with this code ]
But this only works for the first part. If I'm trying to get back to the caret-down, nothing happens.
Thats my HTML:
<div id="acc-construct" class="hidden">
<div class="acc-group">
<div class="acc-head">
<a class="acc-toggle collapsed acc-default" data-toggle="collapse"
data-parent="#acc" href="#collapse-divsInContainer">
<i data-arrow="" class="pull-right fa fa-caret-down"></i>
</a>
</div>
<div id="collapse-divInContainer" class="acc-body collapse">
<div class="acc-inner">
<dl class="dl-horizontal"></dl>
<div class="separator"></div>
</div>
</div>
</div>
</div>
I'm still new in jquery/Js and sorry for my bad english.
Thanks for any help !
Set another class (caret-icon) on the caret element and attach click event to that class:
<i class="caret-icon fa fa-caret-down"></i>
And use toggleClass() method:
$(document).on('click', '.caret-icon', function() {
$(this).toggleClass('fa-caret-up fa-caret-down');
})
Use 'if - else' condition with 'hasClass' method.
Here is the Jquery
$(document).ready(function () {
$('.fa-caret-down').on('click', function () {
if ($(this).hasClass('fa-caret-down')) {
$(this).removeClass('fa-caret-down').addClass('fa-caret-up');
}else{
$(this).removeClass('fa-caret-up').addClass('fa-caret-down');
}
});
});
$('.fa-caret-down') finds the DOM - elements that have the class fa-caret-down when the code is executed, in your case after initialization. These elements get a click handler that removes fa-caret-down and adds fa-caret-up. The elements that have this handler don't change later. So, a second click on one of the elements also removes fa-caret-down and adds fa-caret-up.
You have to check in the handler if the element currently has class fa-caret-down or fa-caret-up. If it has class fa-caret-down you have to remove fa-caret-down and add fa-caret-up. If it has class fa-caret-up you have to remove fa-caret-up and add fa-caret-down.
Your current code $(this).removeClass('fa-caret-up').addClass('fa-caret-down'); does not help because it is executed only one time after initialization.
Related
I have a ul list, where one li elements has a thumbs up, and other haves a thumbs down, when i click each of the thumbs i add a class green or red depending of the type of thumb, but only one can be active or with color, if on of them is selected i need to remove the class of the other that is given a color (green, or red)
The problem is that i cant get the element to check if has the class or not.
My code:
$('.approved').click(function (event) {
event.preventDefault();
$(this).toggleClass('bg-green');
});
$('.not-approved').click(function (event) {
event.preventDefault();
console.log($(this).parent().find('.approved').hasClass('bg-green'));
$(this).toggleClass('bg-red');
});
html:
<div class="options-tools pull-right">
<ul class="list-unstyled list-inline">
<li><i class="fa fa-thumbs-up approved" aria-hidden="true"></i></li>
<li><i class="fa fa-thumbs-down not-approved" aria-hidden="true"></i></li>
</ul>
</div>
Basically when i click on thumbs down (.not-approved), i add the color class 'bg-red', but before i need to chech if the "thumbs up" is active(bg-green).
What im doing it wrong?
Have you tried to do $('.approved').hasClass('bg-green'). hasClass can help you identifying if an element has a specific class. This is a boolean so it will return true if it has the class, otherwise false. You do not need to get the parent and then find the class. You can just select the class if you not the identifier.
<div class="demo_restaurant">
<li class="school" onclick="dropdown(this)">
<span class="icon glyphicon glyphicon-education">
</span>
<span id="1" class="school_title item_title">ABC
</span>
</li>
<li class="school" onclick="dropdown(this)">
<span class="icon glyphicon glyphicon-education">
</span>
<span id="2" class="school_title item_title">WXY
</span>
</li>
</div>
I was trying to get the li id value when someone click on that li with following code:
$(".demo_restaurant li span").on("click", function (argument) {
alert($(this).attr('id'));
});
But the problem is when i added more li with append after ajax call. Then li onclick doesn't work. In that append elements can't call that click function though it's there in HTML. How can i make it work?
Try this:
$('.demo_restaurant').on('click', 'li span', function(argument) {
alert($(this).attr('id'));
});
Explanation:
When elements are added to the DOM dynamically, you need
to tell jQuery to listen for events on the closest parent that was
there when your handler was bound. (Note that it would also work with any further parent, up to document, but it is considerably less optimal.)
Another way would be to bind the handler to your added DOM everytime you add some new content.
I want to trigger an on click event for my <i> tag. I added an ID to it but if i try use:
$("#delete-playlist-song").on("click", function() {
console.log("in"); //doesnt trigger
});
It won't trigger so I want to try a different approach? Something like:
$("master-playlist-entries").find("i.pl-action").on("click", function() {
console.log("in"); //Won't work
});
My HTML code:
<ul id="master-playlist-entries" class="database">
<li id="db-" track-name="James Darren - Goodbye Cruel World" data-path="http://example.com/Cruel%20World.mp3" class="active">
<i style="display:none;" class="fa fa-bars db-action" title="Actions" data-toggle="modal" data-target="#modal"></i>
<i id="delete-playlist-song" class="fa fa-times pl-action" title="Remove Song From Playlist"></i>
<i class="fa fa-music db-icon"></i><span class="sn"> Goodbye Cruel World</span> <span class="bl">James Darren</span></li>
</ul>
What I did try was an onclick event to call a function which worked but you see, I want to grab the data-path information and pass it to that function so I can use: $(this).attr("data-path") which will return a different link each time for different li.
Any help will be appreciated!
Your original code works in a one item snippet, https://jsfiddle.net/TrueBlueAussie/6qhhyxs7/ so I have to guess as your example is incomplete:
It is not shown, but I would guess you have multiple <i> elements with the same id (e.g. id="delete-playlist-song). If that is the case it simply will not find any except the first one as browsers use a fast-lookup cache which can only have one element stored against each ID value. IDs must be unique on a HTML page to work property.
Switch to using classes instead and use a delegated event handler.
https://jsfiddle.net/TrueBlueAussie/6qhhyxs7/1/
e.g.
$(document).on('click', '.delete-playlist-song', function() {
$(this).closest('li').slideUp();
});
Notes:
You should connect delegated event handlers to a non-changing ancestor element, but document is the best default if nothing else is close. Do not use body as it has a bug to do with styling that can cause mouse events to not fire. Use document as your friendly backup as it also exists before DOM ready.
I guess your html is added dynamically - so register the click listener dynamically using this:
$("body").on("click", "#delete-playlist-song", function() {
And for getting the attribute data-path you can use $(this).closest('li').attr("data-path") inside the listener.
See a demo below:
$("body").on("click", "#delete-playlist-song", function() {
console.log($(this).closest('li').attr("data-path"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<ul id="master-playlist-entries" class="database">
<li id="db-" track-name="James Darren - Goodbye Cruel World" data-path="http://example.com/Cruel%20World.mp3" class="active">
<i style="display:none;" class="fa fa-bars db-action" title="Actions" data-toggle="modal" data-target="#modal"></i>
<i id="delete-playlist-song" class="fa fa-times pl-action" title="Remove Song From Playlist"></i>
<i class="fa fa-music db-icon"></i><span class="sn"> Goodbye Cruel World</span> <span class="bl">James Darren</span>
</li>
</ul>
I'm using mobile angular ui to open and close a sidebar. In this sidebar a user can search for persons and add or remove these from an array.
I have this repeat that shows the array of persons when clicking on the <a ...></> it closes the sidebar:
<li ng-repeat="recipient in persons.recipients">
<span class="wrapper">
<span class="imageWrap">
<span class="initials">
{{recipient.firstName.charAt(0)}}{{recipient.lastName.charAt(0)}} </span>
</span>
<i class="fa fa-trash-o" aria-hidden="true"></i>
<span class="details">
<span class="info">
{{recipient.firstName}} {{recipient.lastName}}
<span class="persnr">{{recipient.employeeID}}</span>
</span>
</span>
</span>
</li>
The above html snippet is from a directive that is in the sidebar.
The removeRecipient($index); function looks like this:
$scope.removeRecipient = function(index) {
$scope.persons.recipients.splice(index,1);
}
The function works but closes the sidebar and I can't figure out why it does this. So each time a user removes a recipient it has to swipe the sidebar open again. How do I keep this sidebar open?
References:
mobile angular ui: http://mobileangularui.com/docs/sidebars/
SOLUTION
I solved my problem by adding $event.stopPropagation(); in the ng-click right behind the removeRecipient($index); function.
From doc, there was one line.
You can put ui-turn-off='uiSidebarLeft' or ui-turn-off='uiSidebarLeft'
inside the sidebar to make it close after clicking links inside them.
so may be you can use that or you can use or you can do like below.
e.stopPropagation()
for that you need to pass $event in
<i class="fa fa-trash-o" aria-hidden="true"></i>
so in code, you can write.
$scope.removeRecipient = function(index,e) {
if(e){
e.stopPropagation()
}
$scope.persons.recipients.splice(index,1);
}
I didn't used same tool, but may be this is issue.
This seems quite tricky to me. I want to change a bootstrap column class from "col-md-2" to "col-md-3" when class "panel-titel" within the div is clicked. When the user clicks on another "panel-titel" I want that one's containing "col-md-2" to change to "col-md-3" and the first class change of the other div to be reverted. Is this even possible? Thanks.
<div class="col-md-2">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#timeline1">
15.3.2014
</a>
</h4>
</div>
<div id="timeline1" class="panel-collapse collapse">
<div class="panel-body">
<a href="#" class="thumbnail">
<img class="img-responsive" src="http://placehold.it/250x160" alt="Thumb11">
</a>
</div>
</div>
</div>
</div>
Here's a strategy that might help: listen to the click event on .panel-title, and change the parent class to md-col-3 when it is clicked on, and also revert the classes of all siblings of this parent to md-col-2. Here's the code:
$('.panel-title').click(function() {
$(this)
// Find parent with the class that starts with "col-md"
// Change class to "col-md-3"
.closest('[class^="col-md"]')
.removeClass('col-md-2')
.addClass('col-md-3')
// Find siblings of parent with similar class criteria
// - if all siblings are the same, you can use ".siblings()"
// Change class to "col-md-2"
.siblings('[class^="col-md"]')
.removeClass('col-md-3')
.addClass('col-md-2');
});
Note that if all the siblings of the parents are the same, you can make do without the .siblings('[class^="col-md"]') selector, and use .siblings() instead.
A more simple way to view the code above, without comments. The indentations are useful when chaining in jQuery to keep track of the objects that are currently being manipulated:
$('.panel-title').click(function() {
$(this)
.closest('[class^="col-md"]')
.removeClass('col-md-2').addClass('col-md-3')
.siblings('[class^="col-md"]')
.removeClass('col-md-3').addClass('col-md-2');
});
Here is a proof-of-concept fiddle: http://jsfiddle.net/teddyrised/zwpCF/
[Update] Even better: if you want to save a few bytes, you can use .toggleClass() instead:
$('.panel-title').click(function() {
$(this)
.closest('[class^="col-md"]')
.toggleClass('col-md-2 col-md-3')
.siblings('[class^="col-md"]')
.removeClass('col-md-3')
.addClass('col-md-2');
});
See fiddle here: http://jsfiddle.net/teddyrised/zwpCF/1/
You can try below code
$('.target1').click(function(){
$(".col-md-3").addClass("col-md-2");
$(".col-md-3").removeClass("col-md-3");
});
$('.target2').click(function(){
$(".col-md-2").addClass("col-md-3");
$(".col-md-2").removeClass("col-md-2");
});