How to specify classes using Jquery - javascript

I have created a simple toggle show and hide.
I have a problem though when duplicating the classes.
My toggle works but when I duplicate the containers and press the trigger it shows all containers not just the one.
I have tried to adjust my code using the (this).find function but its not working. can someone show me where i am going wrong?
<!--SHARE-->
<i class="fa fa-share"></i>Share
<div class="show-share-box">
<div class="share-this-wrap">
<a href="#" data-toggle="tooltip" class="share-popup share-btn" title="Share on Facebook">
<i class="fa fa-facebook"></i>
<div class="meta-share-wrap">
<span class="shot-social-count">4</span>
</div>
</a>
<a href="#" data-toggle="tooltip" class="share-popup share-btn" title="Share on Twitter">
<i class="fa fa-twitter"></i>
<div class="meta-share-wrap">
<span class="shot-social-count">6</span>
</div>
</a>
</div>
</div><!--end share box-->
My code that works.
$(".share-trigger").click(function(e){
e.preventDefault();
$(".show-share-box").slideToggle('slow');
})
My code that is not working - here i have tried to add the (this function)
$(".share-trigger").click(function(e){
e.preventDefault();
$(this).find('.show-share-box').slideToggle('slow');
})
Thanks a bunch!!

Next will select all .show-share-box so using the first in the next set should do the trick.
$(".share-trigger").click(function(e){
e.preventDefault();
//$(".show-share-box").slideToggle('slow');
$(this).next(".show-share-box").first().slideToggle('slow');
})

the problem is you are selecting <a> element as $(this) and finding inside ('.show-share-box') which is sitting outside your <a>
you can use .next() or directly use class to toggle
Jsfiddle: http://jsfiddle.net/FtgN4/2/
$(".share-trigger").click(function (e) {
e.preventDefault();
$('.show-share-box').slideToggle("slow", function () {
// animation complete
});
})

Should be:
$(this).next('.show-share-box').slideToggle('slow');

$(this).find('.show-share-box').slideToggle('slow');
$(this) --> refers to the current element which is .share-trigger in your case
$(this).find('.show-share-box') means find the .show-share-box inside .share-trigger
your code not working as there is no element .show-share-box inside .share-trigger
Updated after OP updated question.
.next()
$(this).next('.show-share-box').slideToggle('slow');

Related

How to toggle one of many links with icons using JavaScript

I have several dynamically created links which rendered as buttons and the buttons texts are replaced with icons. I need to toggle one of the link button icons when clicked. The method that I am using is not working out. See code below: I do not want to use JQuery at this time unless it’s within a function.
<a class="button" onclick="command('removeFormat');" title="Remove Format"><i class="fas fa-eraser"></i></a>
<a class="button" onclick="command('fullScreen');" title="Full Screen"><i class="fas fa-expand"></i></a>
<a class="button" onclick="doToggleView();" title="Source"><i class="fa fa-code"></i></a>
<a class="button" onclick="submitForm();" title="Save"><i class="far fa-save"></i></a>
//JS
function command(cmd){
if(cmd == 'fullScreen'){
$(".fa-expand").toggleClass('fa-expand fa-compress');
}else{
$(".fa-compress").toggleClass('fa-compress fa-expand');
}
}
I also try using the following codes:
$("i").toggleClass('fa-compress fa-expand');
$("a .button").find("i").toggleClass('fa-expand fa-compress');
This is the fix to resolve the issue.
function command(cmd){
$('i.fas').toggleClass('fa-expand fa-compress');
}

JavaScript (jQuery) does not react anymore after I have changed the element [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 4 years ago.
I have 2 links:
<span id="a-start-container">
<a id="a-start" href="#">
<i class="fa fa-fw fa-play inner-circle-color"></i>
</a>
</span>
<span id="a-stop-container">
<a id="a-stop" href="#">
<i class="fa fa-fw fa-play inner-circle-color"></i>
</a>
</span>
When I click on the first one (a-start) I'm disabling it by removing the <a> element and at the same time I enable the second one (a-stop) by adding the <a> element:
$(document).ready(function() {
$("#a-start").click(function(e){
$("#a-stop-container").html("<a id='a-stop' href=''><i class='fa fa-fw fa-stop inner-circle-color'></a>");
$("#a-start-container").html("<i class='fa fa-fw fa-play inner-circle-color'>");
})
});
When I click on the second one (a-stop) I'm disabling it by removing the <a> element and at the same time I enable the first one (a-start) by adding the <a> element:
$(document).ready(function() {
$("#a-stop").click(function(e){
$("#a-start-container").html("<a id='a-start' href=''><i class='fa fa-fw fa-play inner-circle-color'></a>");
$("#a-stop-container").html("<i class='fa fa-fw fa-stop inner-circle-color-off'>");
})
});
The problem is that it works only for the first click. For example I click on the first one (a-start), then it changes a-start and enables a-stop. But then, when I click on a-stop, JavaScript does not react anymore. The same situation the other way round. Both work fine until the <a> element gets changed - then I have to reload the page to get it run again.
There is no information in the console.
What am I doing wrong?
you should consider changing it to on instead of click based on the pattern that you are using. Usage of on can be found her: http://api.jquery.com/on/
What you are doing is replacing entire DOM content on which handler/listener is registered and thus it dont get re-registered on DOM change which is happening after first click event.
However what seemed like you only wanted to toggle class-name and text of the link which should have been handled via http://api.jquery.com/toggleClass/ which would be more appropriate.

jQuery: hide by class name and then show next element by the same class name?

I'm trying to create a demonstration type of thing in my page.
basically the first element is showing on the page load and the rest are hidden.
once the close button inside the element has been clicked, I need this showing element to hide and the next element with the same class name to show and the same process until there is no more element in the next() to show.
my html looks like this:
<a class="tooltip" href="#">
<div style="left:-200px;" class="bubs"><div style=" position:absolute; top:10px; right:10px;"><i class="cls" aria-hidden="true"></i></div></div>
<span class="tooltiptext">Some texts</span><i style="color:#F90;" class="fa fa-thumbs-up" aria-hidden="true"></i></a>
<a class="tooltip" href="#">
<div style="left:-200px;" class="bubs"><div style=" position:absolute; top:10px; right:10px;"><i class="cls" aria-hidden="true"></i></div></div>
<span class="tooltiptext">Some texts</span><i style="color:#F90;" class="fa fa-thumbs-up" aria-hidden="true"></i></a>
And my jquery looks like this:
$('.cls').click(function() {
$('.bubs').hide();
$(".bubs").next().show();
});
My simple code will hide .bubs that is showing but it doesn't show the next .bubs
Could someone please advise on this issue?
Thanks in advance.
.bubs are not siblings. Go to ancestor a and then find .bubs in next a like following.
$('.cls').click(function () {
$(this).closest('.bubs').hide();
$(this).closest('a').next('a').find('.bubs').show();
});
The JQuery method "next" should contain the class of the next element you want to show.It should work if you use next(".bubs") like this :
$('.cls').click(function() {
$('.bubs:first').hide();
$(".bubs:first").next(".bubs").show();
});
Note : I assume that the element you want to hide is the first one who has "bubs" class.

Onclick for dynamically created elements using jquery

Onclick event is just not working for me. When mouse in over some div, I dynamically insert some icons using .html() function, and want to set onclick on that icons but i can't. I also tried setting click listener for the static enclosing div (jquery .on('click', ..) function) or for the whole page but it's no use, as if those icons just swallow the click event... Any ideas?
<div id="rating" class="pull-right rating-box clearfix">
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
Here is html
I have tried a lot of way of doing, but here is the latest thing i tried
$(document).ready(function()
{
//some code
$('#rating').html(/* some combination of <i class="fa fa-star"></i>'s */);
$('#rating').on('click', 'i', function() { });
});
Use the .append() method instead:
$('#rating').empty();
$('#rating').append(/* some combination of <i class="fa fa-star"></i>'s */);
$('#rating').on('click', 'i', function() { });
jsFiddle
See jquery .html() vs .append() for more information.

Placing characters on JQuery slider handle

Whay I want to acomplish is use icons from fontawesome on my JQuery sliders, so I am pretty much trying to insert HTML code into the a that serves as the container for the handle.
This is my JavaScript
$(document).ready(function () {
$(function () {
$("#slider-vertical").slider({
orientation: "vertical"
});
$("#amount").val($("#slider-vertical").slider("value"));
});
$('#slider-vertical.blue a.slider-handle').append('<i class="fa fa-bars"></i>');
});
And this is the HTML for the said slider
<div id="slider-vertical" class="blue">zing</div>
Weird thing is I tried to target the outer part of the slider and that worked
$('#slider-vertical.blue').append('<i class="fa fa-bars"></i>');
, I don't understand why it won't put it inside the handler.
I expect something like this as output
<div id="slider-vertical" class="blue">
<a class="slider-handle">
<i class="fa fa-bars"></i>
</a>
</div>
It does add the element, which is visible. http://jsfiddle.net/LZx5L/1/ This is your problem
$('#slider-vertical.blue a.slider-handle').append('<i class="fa fa-bars"></i>');
There is no a.slider-handle, it's a.ui-slider-handle
$('#slider-vertical.blue a.ui-slider-handle').append('<i class="fa fa-bars"></i>');
However, There's no reason the icon has to be an <i>. Adding the classes to the element is the simplest solution.
$('#slider-vertical.blue a.ui-slider-handle').addClass('fa fa-bars');
http://jsfiddle.net/LZx5L/

Categories