Text swap from radio for active button - javascript

I have the fa-icon for the selected radio going to the menu-btn, but how do I also take the text from the radio?
$("body").on("click", ".btn-opt", function(event) {
var $el = $(this);
var id = $el.attr("id");
$(this)
.parent()
.parent()
.find("span.selected")
.removeClass("active");
$el.find("span.selected").addClass("active");
$(".menu-btn > i:first")
.removeClass()
.addClass("fa fa-fw fa-" + id);
$(".menu-btn")
.removeClass()
.addClass("menu-btn btn btn-primary fg-" + id);
});
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex">
<div class="menu-btn btn fg-create"><i class="fa fa-plus fa-fw"></i><i class="arrow fa fa-fw"></i>Menu</div>
<div class="menu">
<div class="btn-opt btn fg-shopping-bag" id="shopping-bag">
<label for="shopbtn"><input id="shopbtn" name="toggler" type="radio"><i class="fa fa-fw fa-shopping-bag"></i> Bag</label>
</div>
<div class="btn-opt btn fg-rocket" id="rocket">
<label for="rocketbtn"><input id="rocketbtn" name="toggler" type="radio"><i class="fa fa-fw fa-rocket"></i> Rocket</label>
</div>
</div>
</div>

If you can wrap the text that needs to be changed in its own element, you can just add one more line to the bottom of your code:
$("body").on("click", ".btn-opt", function(event) {
var $el = $(this);
var id = $el.attr("id");
$(this)
.parent()
.parent()
.find("span.selected")
.removeClass("active");
$el.find("span.selected").addClass("active");
$(".menu-btn > i:first")
.removeClass()
.addClass("fa fa-fw fa-" + id);
$(".menu-btn")
.removeClass()
.addClass("menu-btn btn btn-primary fg-" + id);
// Set the top text to the text of the clicked element
$("span#topText").text($(this).text());
});
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex">
<div class="menu-btn btn fg-create"><i class="fa fa-plus fa-fw"></i><i class="arrow fa fa-fw"></i>
<!-- Wrap the text to be changed in its own element -->
<span id="topText">Menu</span>
</div>
<div class="menu">
<div class="btn-opt btn fg-shopping-bag" id="shopping-bag">
<label for="shopbtn"><input id="shopbtn" name="toggler" type="radio"><i class="fa fa-fw fa-shopping-bag"></i> Bag</label>
</div>
<div class="btn-opt btn fg-rocket" id="rocket">
<label for="rocketbtn"><input id="rocketbtn" name="toggler" type="radio"><i class="fa fa-fw fa-rocket"></i> Rocket</label>
</div>
</div>
</div>

If you don't like to change your html,
you can use nodeType===3 to filter out all text contents in $(.menu-btn).contents(), then replace it with the value you want.
$("body").on("click", ".btn-opt", function(event) {
var $el = $(this);
var id = $el.attr("id");
$(this)
.parent()
.parent()
.find("span.selected")
.removeClass("active");
$el.find("span.selected").addClass("active");
$(".menu-btn > i:first-child")
.removeClass()
.addClass("fa fa-fw fa-" + id);
// find out all text content (nodeType===3), then replace with yours
//.each is not required, you can change to [0].textContent = 'yourConent' if make sure at least exists one text content.
$(".menu-btn").contents().filter(function() {
return this.nodeType == 3
}).each(function(){
this.textContent = $el.find('label').text();
});
$(".menu-btn")
.removeClass()
.addClass("menu-btn btn btn-primary fg-" + id);
});
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex">
<div class="menu-btn btn fg-create"><i class="fa fa-plus fa-fw"></i><i class="arrow fa fa-fw"></i>Menu</div>
<div class="menu">
<div class="btn-opt btn fg-shopping-bag" id="shopping-bag">
<label for="shopbtn"><input id="shopbtn" name="toggler" type="radio"><i class="fa fa-fw fa-shopping-bag"></i> Bag</label>
</div>
<div class="btn-opt btn fg-rocket" id="rocket">
<label for="rocketbtn"><input id="rocketbtn" name="toggler" type="radio"><i class="fa fa-fw fa-rocket"></i> Rocket</label>
</div>
</div>
</div>

Related

How to select a specific div with specific class jQuery?

I have a circle, when I clicked on it 2 options showed up.
<div class="col-sm-2" style="display: block;">
<span class="fa fa-mobile circle-icon fa-5x client" style="background-color: rgb(75, 183, 232);">
</span>
<div class="line" style="display: none;"></div>
<div class="options" style="display: block;">
<input type="text" class="search" name="">
<i class="fa fa-plus float-right"></i>
<p class="option" id="Dualstack-Pvt">
Dualstack-Pvt
<i class="fa fa-info-circle float-right"></i>
</p>
<p class="option" id="Dualstack-Pvt-2">
Dualstack-Pvt-2
<i class="fa fa-info-circle float-right"></i>
</p>
</div>
<div class="selected" style="display: none;"></div>
</div>
I want to do something when one of the option clicked.
I can't seem to select it.
This is what I have now.
$('.' + selector).on("click", function() {
if (steps.indexOf(selector) != -1) {
nextStep = steps[steps.indexOf(selector) + 1];
}
let self = $(this);
$('div.options').fadeOut('fast');
self.animate({
backgroundColor: fadeColor
}, 1400);
self.next().next('.options').slideDown(1000);
console.log(self)
self.find('.options').find('option').one("click", function(event) {
console.log('%c -------->> HERE <<--------', "color: green;");
});
});
This is my selection
self.find('.options').find('option').one("click", function(event) {
I thought find() will find the matching class ... No ?
Please help me understand why this is not working ...
In the query you have here:
self.find('.options').find('option')
The section self.find('.options') will look for elements that are the class option that are the children of self. In this case since self is a <span> with no children so the selector will not work. Note you are already doing this when you used self.next().next('.options'). Next the .find('option') part will look for the tag <option> and not the class option, so change this to .option. With those fixes you will have:
self.siblings('.options').find('.option').one("click", function(event) {
console.log('%c -------->> HERE <<--------', "color: green;");
});
Snippet example
$('.fa-mobile').on("click", function() {
let self = $(this);
$('div.options').fadeOut('fast');
self.next().next('.options').slideDown(1000);
self.siblings('.options').find('.option').one("click", function(event) {
console.log('%c -------->> HERE <<--------', "color: green;");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-2" style="display: block;">
<span class="fa fa-mobile circle-icon fa-5x client" style="background-color: rgb(75, 183, 232);">Circle
</span>
<div class="line" style="display: none;"></div>
<div class="options" style="display: block;">
<input type="text" class="search" name="">
<i class="fa fa-plus float-right"></i>
<p class="option" id="Dualstack-Pvt">
Dualstack-Pvt
<i class="fa fa-info-circle float-right"></i>
</p>
<p class="option" id="Dualstack-Pvt-2">
Dualstack-Pvt-2
<i class="fa fa-info-circle float-right"></i>
</p>
</div>
<div class="selected" style="display: none;"></div>
</div>

open div on click of image

I have a very simple module to develop. On click of an image I need to open up a div element that I have created.I have attached my HTML and javascript file.When I am loading the page the div wont be coming because I have given style="display:none
myfunction() {
document.getElementById('Chatbot').style.visibility = "visible";
}
<body>
<a href="#Chatbot" id="chat" onclick="myfunction()">
<img src="sticky.png" style="width:50px;height:50px">
</a>
<div id="Chatbot" style="display:none">
<div id="header">
Legal Genie
<div class="icons">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<i class="fa fa-refresh" aria-hidden="true"></i>
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
<div><textarea rows="3" cols="20">Press enter to send your message</textarea>
</div>
</div>
</body>
document.getElementById('Chatbot').style.display = "block";
function myfunction() {
document.getElementById('Chatbot').style.display = "block";
}
<body>
<a href="#Chatbot" id="chat" onclick="myfunction()">
Some Image
</a>
<div id="Chatbot" style="display:none">
<div id="header">
Legal Genie
<div class="icons">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<i class="fa fa-refresh" aria-hidden="true"></i>
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
<div><textarea rows="3" cols="20">Press enter to send your message</textarea>
</div>
</div>
</body>
Avoid using inline scripts and also avoid capitalising the first letter of your ID or class name.
Just add an event listener to your #chat anchor link that loads a function which sets the css display property of your div to block on click like this:
/* JavaScript */
var chat = document.getElementById("chat");
var div = document.getElementById('chatbot');
function showDiv(){
div.style.display = "block";
}
chat.addEventListener("click", showDiv);
/* CSS */
a {text-decoration: none; padding: 5px; background-color: green; color: white;}
#chatbot {display: none;}
<!-- HTML -->
<a type="button" href="#Chatbot" id="chat">Open Div</a>
<hr>
<div id="chatbot">
<div id="header">
Legal Genie
<div class="icons">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<i class="fa fa-refresh" aria-hidden="true"></i>
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
<div><textarea rows="3" cols="20">Press enter to send your message</textarea>
</div>
It can be a simple way
<script>
$( document ).ready(function() {
$('#chat').click( function(){
if ( $('#Chatbot').hasClass('active') ) {
$('#Chatbot').removeClass('active');
} else {
$('#Chatbot').addClass('active');
}
});
});
</script>
Add lil css
<style>
.active {
display:block!important;
}
</style>
Your HTML
<body>
<div id="chat">
Some Image
</div>
<div id="Chatbot" style="display:none">
<div id="header">
Legal Genie
<div class="icons">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<i class="fa fa-refresh" aria-hidden="true"></i>
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
<div><textarea rows="3" cols="20">Press enter to send your message</textarea>
</div>
</div>
</body>

'click' event only fires on first click and not second

I have five elements and want something to happend when I click one of them. My code works fine when clicking for first time, but the event never hits on second click. Any idea why?
$("#ratingModal").find(".star.clickable").on("click", function () {
console.log("click");
var $wrap = $(this).closest(".stars");
var count = parseInt($(this).data("star"));
$.each($wrap.find(".star"), function ($index, $itm) {
let current = parseInt($($itm).data("star"));
$($itm).removeClass("fas");
$($itm).removeClass("far");
console.log(current);
if (current <= count) {
$($itm).addClass("fas");
console.log("fas");
}
else {
$($itm).addClass("far");
console.log("far");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="ratingModal">
<div class="body">
<div class="score-wrap">
<span class="label">Score: </span>
<div class="stars">
<i class="fas fa-star clickable star star-1" title="1" data-star="1"></i>
<i class="far fa-star clickable star star-2" title="2" data-star="2"></i>
<i class="far fa-star clickable star star-3" title="3" data-star="3"></i>
<i class="far fa-star clickable star star-4" title="4" data-star="4"></i>
<i class="far fa-star clickable star star-5" title="5" data-star="5"></i>
</div>
</div>
</div>
</div>
Try Using off().on('...') function
$("#ratingModal").find(".star.clickable").off().on("click", function () {
console.log("click");
var $wrap = $(this).closest(".stars");
var count = parseInt($(this).data("star"));
$.each($wrap.find(".star"), function ($index, $itm) {
let current = parseInt($($itm).data("star"));
$($itm).removeClass("fas");
$($itm).removeClass("far");
console.log(current);
if (current <= count) {
$($itm).addClass("fas");
console.log("fas");
}
else {
$($itm).addClass("far");
console.log("far");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="ratingModal">
<div class="body">
<div class="score-wrap">
<span class="label">Score: </span>
<div class="stars">
<i class="fas fa-star clickable star star-1" title="1" data-star="1"></i>
<i class="far fa-star clickable star star-2" title="2" data-star="2"></i>
<i class="far fa-star clickable star star-3" title="3" data-star="3"></i>
<i class="far fa-star clickable star star-4" title="4" data-star="4"></i>
<i class="far fa-star clickable star star-5" title="5" data-star="5"></i>
</div>
</div>
</div>
</div>

Adding class to parent element where sub-child element input value is empty?

When clicking on button #btn-modal-clear I would like to select and add a class to the li where it's sub-child input is empty (value=""). How do I do this?
html:
<li>...<li>
<li>
<a class="myCheckboxLink" tabindex="0">
<span class="myCheckboxSpan">
<i class="fa fa-check fa-check-checkbox" aria-hidden="true"></i>
</span>
<label class="radio">
<input value="" type="radio">Name
</label>
</a>
</li>
<li>...<li>
js:
$('#btn-modal-clear').on('click', function() {
$('.select-name').multiselect('select', ['']);
$('.select-name').multiselect('updateButtonText');
... .addClass("active");
});
So result should be:
html:
<li>...<li>
<li class="active">
<a class="myCheckboxLink" tabindex="0">
<span class="myCheckboxSpan">
<i class="fa fa-check fa-check-checkbox" aria-hidden="true"></i>
</span>
<label class="radio">
<input value="" type="radio">Name
</label>
</a>
</li>
<li>...<li>
Fiddle: https://jsfiddle.net/ewm9pbqv/
You can use .filter() with .addClass() in this case:
$('li').filter(function() {
return $(this).find('input:radio').val() == "";
}).addClass('active');
Try this
$('li input[value=""]').closest("li").addClass('active');

Selecting an element that has just been clicked JQuery

I have a <div> containing a <a> tags and further divs:
<div>
<div class="icons">
<div class="group popOutDisplay">
<i class="fa fa-home"></i>
<i class="fa fa-search"></i>
<i class="fas fa-bicycle"></i>
</div>
<div class="group">
<i class="fa fa-globe"></i>
</div>
<div class="group bottom">
<i class="fa fa-trash"></i>
</div>
</div>
<div class="content">
<div id="128910";>
<p>some content</p>
</div>
<div id="239019";>
</div>
<div id="346653";>
</div>
</div>
</div>
Im trying to select the data attribute on the anchor tag with jquery so that i can display the the <div> tags in <div class="content"> which have the same ID (if that makes sense?).
So far i've been able to identify the data id with
$(".group.popOutDisplay a")[0].attributes[1].value;
but this only gives the ID of the first element, due to the [0] index.
tldr:
How can I get the data-ID of the <a> tag that has just been clicked?
Here we go:
$('.popOutDisplay a').click(function(e) {
e.preventDefault();
console.log($(this).data('id'));
});
Here the documentation of .data() attribute.
Demo: https://jsfiddle.net/ru4pjz3c/2/
You can use ".click()" for this. check snippet below..
$('.popOutDisplay a').click(function(e){
e.preventDefault();
var elID = $(this).data('id');
console.log(elID);
})
<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" type="text/css" />
<div>
<div class="icons">
<div class="group popOutDisplay">
<i class="fa fa-home"></i>
<i class="fa fa-search"></i>
<i class="fas fa-bicycle"></i>
</div>
<div class="group">
<i class="fa fa-globe"></i>
</div>
<div class="group bottom">
<i class="fa fa-trash"></i>
</div>
</div>
<div class="content">
<div id="128910";>
<p>some content</p>
</div>
<div id="239019";>
</div>
<div id="346653";>
</div>
</div>
</div>
$(".group a").click(function(){
var data=$(this).attr("data-id");
alert(data)
});
To retrieve the value's attribute as a string without any attempt to convert it, use the attr() method.
$(document).on("click", "[data-id]", function (event){
event.preventDefault();
var id = $(this).attr("data-id");
// Apply your logic here
// $("#" + id)
});
bind click event listener on the a element container div <div class="group popOutDisplay". the reason is because click events on the a elements will bubble up to div container.
something like
$('.group.popOutDisplay').bind('click', function(e) {
var target = e.target;
if (target.tagName.toLowerCase() === 'a') {
e.preventDefault(); //prevent the default action of navigating to the url
var id = target.dataset.id;
//you now have the id;
$('#' + id).css('display', 'block'); //display the div
}
});

Categories