Remove and Add class is not working in jquery - javascript

What do I need:
I need to have something like "toggling of images" using the functions to add & remove classes in jquery.
JavaScript code
$('.hover12').click(function () {
$('.fa-star-o').removeClass('fa-star-o').addClass('fa-star orange12');
});
HTML code
<a href="javascript:void(0);" class="hover12">
<i class="fa fa-star-o favourate_dextop" title="Add to Favorites" id="fav13039" data-sess_id="13039" data-name="MAGIC" data-city="Las Vegas" data-country="United States Of America" data-event_url="magic"></i>
</a>
Problem:
On the first click, remove class works fine and add class to that particular class.
Then I have a problem on the second click, neither remove or add class works.
o/p on first toggle
<i class="fa favourate_dextop fa-star orange12" title="Add to Favorites" id="fav13039" data-sess_id="13039" data-name="MAGIC" data-city="Las Vegas" data-country="United States Of America" data-event_url="magic"></i>
The solution I found:
$('.hover12').click(function () {
$('.fa-star').removeClass('fa-star orange12').addClass('fa-star-o');
});

Change this
$('.fa-star-o').RemoveClass...
to this
$(this).find('i').RemoveClass...

try this:
$('.hover12').click(function()
{
$(this).find('.fa').toggleClass('fa-star-o').toggleClass('fa-star orange12');
});

The selector fails for .fa-star-o class the second time because there is no class like that since it was removed on the first click.
$('.hover12').click(function(e){
e.preventDefault();
if($('.hover12 i').hasClass('fa-star-o')){
$('.fa-star-o').removeClass('fa-star-o').addClass('fa-star orange12');
}else if($('.hover12 i').hasClass('fa-star'){
$('.fa-star-o').removeClass('fa-star orange12').addClass('fa-star-o');
}
});
This is one ugly solution though!

Related

Adding tooltips in jQuery

I have a problem assigning a tooltip to a glyphicon.
I had a look at this JSFiddle, but it is not applicable for my case since I am using jQuery to create the HTML elements like this:
var trashIcon = $('<i>').addClass('glyphicon glyphicon-trash');
Now I want to wrap the following code to match the JSFiddle link... but how can I do this?
var trashToolTip = $('<a>').addClass=('my-tool-tip').attr({ data-toggle:"tooltip" data-placement:"left" title:"Delete" });
CSS:
a.my-tool-tip, a.my-tool-tip:hover, a.my-tool-tip:visited {
color: black;
}
EDIT:
As seen in the JSFiddle link:
The class CANNOT be tooltip...
var trashIcon looks like this in when parsed into HTML:
`<i class='glyphicon glyphicon-trash'></i>`
I want the HTML version of var trashToolTip, which is the following, to be parent (better term?):
<a class='my-tool-tip' data-toggle="tooltip" data-placement="left" title="delete"></a>
So that it should look like the following code:
<a class='my-tool-tip' data-toggle="tooltip" data-placement="left" title="delete">
<i class='glyphicon glyphicon-trash'></i>
</a>
You can use jQuery's wrap function to achieve that HTML structure. You'd use it like:
trashIcon.wrap(trashToolTip);

How to show edit action icon when mouse-over on particular text

How to show / hide edit icon on mouseover and mouseout on particular text.
Here is my html code snippet
<ul>
<li>
<a id="pop" href="javascript:;;" data-content="test Desc" data-id="123">
<span class="testNameInfo">Test</span>
</a>
<div class="pull-right icons-align">
<i class="fa fa-pencil"></i>..
<i class="fa fa-plus"></i>
<i class="fa fa-times"></i>
</div>
</li>
</ul>
when page loads the fa-pencil icon is in hide state. When i mouse over on text, it should show fa-pencil icon. Remaining icons (add and delete) are always in show state.
Here is my javascript to hide the fa-pencil icon
$("a.editInline").css("display","none");
Am using backbone and marionette js frameworks, so i need to register the events in view.
Please let me know what is the best way to get out from my issue.
You can do as below:
$('.testNameInfo').on('mouseover mouseout',function(){
$(this).closest('li').find('.editInline').toggle();
//find the closest li and find its children with class editInLine and
//toggle its display using 'toggle()'
});
UPDATE
DEMO
#JamieBarker made his point which is valid here so I would suggest to try below code instead
$("a.editInline").css("display","none");
$('li').on('mouseover mouseout',function(){
$(this).find('.editInline').toggle();
//find its children with class .editInLine and
//toggle its display using 'toggle()'
});
Better to use CSS than JavaScript if you can:
a.editInline {
display:none;
}
li:hover a.editInline {
display:inline-block;
}
UPDATE
Performance/Simplicity wise I'd advise going with the CSS solution provided. If all else you can use then JS solution.
Optional CSS Solution
.editInline {
display: none;
}
#pop:hover .icons-align .editInline {
display: inline-block;
}
JS Solution
$(function() {
$(".editInline").hide(); // Use this if CSS is not wanted
$("#pop").hover(function() {
$(".editInline").show();
}, function() {
$(".editInline").hide();
});
});

jQuery multiple Attribute selector with find() not working

jQuery Version 1.11.1
Bootstrap Version 3.1.1
HTML
<i class="fa fa-question-circle" data-toggle="tooltip" data-title="hover focus"></i>
<i class="fa fa-question-circle" data-toggle="tooltip" data-title="hover focus"></i>
<i class="fa fa-question-circle" data-toggle="tooltip" data-trigger="click" data-title="click"></i>
<i class="fa fa-question-circle" data-toggle="tooltip" data-trigger="click" data-title="click"></i>
JS
$("[data-toggle='tooltip']").tooltip()
.find("[data-trigger='click']")
.on("click", function(e) {
$("[data-toggle='tooltip'][data-trigger='click']").not(this).tooltip("hide");
});
// true
// $("[data-toggle='tooltip'][data-trigger='click']").length === 2
// false
// $("[data-toggle='tooltip']").tooltip().find("[data-trigger='click']").length === 2
I know can use
$("[data-toggle='tooltip']").tooltip();
$("[data-toggle='tooltip'][data-trigger='click']").on("click", function(e) {
$("[data-toggle='tooltip'][data-trigger='click']").not(this).tooltip("hide");
});
Why the first code can not use find()?
find searches the descendants of the selected objects, not the selected objects themselves. Your selector is obtaining all the elements anyway.
As #adeneo has stated,filter is probably what you are looking for, in order to only select the elements with the data-trigger="click" attribute
i.e.
$("[data-toggle='tooltip']").tooltip()
.filter("[data-trigger='click']")
.on("click", function(e) {
....
.filter() is what you need not .find()
It reduces the currently selected elements to those that match the selector
$("[data-toggle='tooltip']").tooltip()
.filter("[data-trigger='click']")
.on("click", function(e) {
$("[data-toggle='tooltip'][data-trigger='click']").not(this).tooltip("hide");
});

(Bootstrap 3.1.1) popover on show reset my addClass?

<button id="search-district" type="button" class="btn btn-sm btn-success" data-toggle="popover" data-placement="bottom" title="<a href='#' class='pull-right popover-close' onclick='$("#search-district").popover("hide");'>×</a>" data-html="true" data-content="
<a id='id_district_100' href='#' onclick='ChangeDistrictSelection("100");'>District123</a>
"><span class="glyphicon glyphicon-plus"></span> Dsitricts <span id="district_bracket" style="display:none;">[<span id="count_districts_">0</span>]</span></button>
and JavaScript function
function ChangeDistrictSelection(id)
{
$('#id_district_'+id).addClass("selected");
}
When I'm clicked to District123, my JavaScript add Class "active"... But, after that when action popover on show, popover reset my class :(
What ever your selected css is you have to mark it with !important in order to override existing one.
Example
.selected {
background-color:gray !important;
}
Your question is not clear much. Please explain it we can help you so.
And also please not this also.
You are passing '100' to the function using onclick and then you are trying to get the element by id. But is already is equal to the id.
WHY??
You are doing wrong here. See your codes.
<a id='id_district_100' href='#' onclick='ChangeDistrictSelection("100");'>District123</a>
and you function also have a look
function ChangeDistrictSelection(id) {
//id will be 100 as your code.
//again you are trying to get the element by id. see your html <a id="id_district_100">
//It's already equal to $('#id_district_'+100) - why do you passing that 100 and trying to get element by id??
$('#id_district_'+id).addClass("selected");
}
If you want to add the class to that element you can use this.
function ChangeDistrictSelection(id){
//alert(id);
$(id).addClass('selected');
}
In html pass like that
<a id='id_district_100' href="#" onclick='ChangeDistrictSelection(id)'>District123</a>
ok... v2
html:
<button id="search-district" type="button" class="btn btn-sm btn-success" data-toggle="popover" data-placement="bottom" title="<a href='#' class='pull-right popover-close' onclick='$("#search-district").popover("hide");'>×</a>‌​" data-html="true" data-content=" <a id='id_district_100' href='#' onclick='ChangeDistrictSelectionCss("100");'>District123</a> ... ">
js:
function ChangeDistrictSelectionCSS(id){
$('#id_district_'+id).css("color","red");
}
It's work, but when clicked button (id="search-district") again, css color is not red

jQuery check click for each link

$("#showKey").each(
$(this).click(function(){
alert($(this).attr("value"));
})
);
And
<a id="showKey" href="#" value="{{ customer.key }}">
<span class="icons icon-key"></span>
Show key
</a>
The alert gives and undefined output, just 'undefined'. I have a list of customers and a click on #showKey should reveal the key for the clicked customer.
Whats wrong with my code?
You cannot have multiple elements with the same ID - use a class instead. Additionally, you don't need the call to .each -- use a class selector instead:
$(".showKey").click(function(){
alert($(this).data("key"));
);
<a class="showKey" href="#" data-key="{{ customer.key }}">Show key</a>
you can use data attribute:
<a id="showKey" href="#" data-value="{{ customer.key }}">
<span class="icons icon-key"></span>
Show key
</a>
$("#showKey").click(function(){
alert($(this).data("value"));
})
http://jsfiddle.net/LKArX/
You do not need the jQuery each function.
$("#showKey").click(function(){
alert($(this).attr("value"));
});
The problem with your code is in your usage of
$("#showkey").each({...});
You should simply use
$("#showkey").click({function(){
alert( $this).val() );
}
});
to bind the click event to every showkey id'd element.

Categories