Remove class from all div except the other two divs - javascript

I need help whenever i click on div with .clickable class .bg-color class will be added to span.aa and span.aaa and when i select option any other option like c other from other option .bg-color class will be removed i tried many other methods but its not working kindly help me get through this
$('.clickable').on('click',function(){
$('.aa .aaa').removeClass('bg-color');
$(this).addClass('bg-color');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="div input-group mb-3 col-md-6">
<div class="input-group-prepend">
<span class=" aa input-group-text bor-clr" id="basic-addon1">A</span>
</div>
<div class="clickable input-group-prepend">
<span class="aaa input-group-text select-opt bor-clr ml-1" id="basic-addon1">Full time</span>
</div>
</div>
<div class="input-group mb-3 col-md-6">
<div class="input-group-prepend">
<span class="aa input-group-text bor-clr" id="basic-addon1">B</span>
</div>
<div class="clickable input-group-prepend">
<span class="aaa input-group-text select-opt bor-clr ml-1" id="basic-addon1">Part Time</span>
</div>
</div>
<div class="input-group mb-3 col-md-6">
<div class="input-group-prepend">
<span class="aa input-group-text bor-clr" id="basic-addon1">C</span>
</div>
<div class="clickable input-group-prepend">
<span class="aaa input-group-text select-opt bor-clr ml-1" id="basic-addon1">Pinch</span>
</div>
</div>
<div class="input-group mb-3 col-md-6">
<div class="input-group-prepend">
<span class="aa input-group-text bor-clr" id="basic-addon1">D</span>
</div>
<div class="clickable input-group-prepend">
<span class="aaa input-group-text select-opt bor-clr ml-1" id="basic-addon1">Weekend Worrior</span>
</div>
</div>
</div>
</div>


You are selecting elements which each has multiple classes, it must be selecting elements which each has one of these classes. Below is a worked solution
$('.clickable').on('click', function() {
$('.aa, .aaa').removeClass('bg-color')
$(this)
.parent()
.find('.aa, .aaa')
.addClass('bg-color')
})

Related

How to set large amount of HTML in Vue.js template?

I am new in Vue.js. I have a question about how to render a large amount of HTML in vue.js template.
So i put a HTML in my template thats like a 500 lines of plain HTML. And when i do
npm run dev
the compiling is to slow, or don't finish the compiling.
<template>
<div class="m-grid m-grid--hor m-grid--root m-page">
<mobile-menu-partial></mobile-menu-partial>
<header-partial></header-partial>
<div>HTML goes here</div> <------
<footer-partial></footer-partial>
</div>
</template>
So is there an easy way to make that? I searched everything but could not find any site for that question.
This is my HTML.
<div class="m-grid__item m-grid__item--fluid m-grid m-grid--hor-desktop m-grid--desktop m-body">
<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver m-container m-container--responsive m-container--xxl m-page__container">
<div class="m-grid__item m-grid__item--fluid m-wrapper">
<div class="section-contacts">
<!-- CONTACTS -->
<div class="m-content">
<div class="m-portlet">
<div class="m-portlet__body m-portlet__body--no-padding">
<div class="row m-row--no-padding m-row--col-separator-xl">
<div class="col-xl-6">
<div class="standard-widget">
<div class="m-widget14">
<div class="widget_header_menu margin-bottom-10">
<div class="m-widget14__header">
<h3 class="m-widget14__title">Grups</h3>
<span class="m-widget14__desc">3 groups</span>
</div>
<div class="m-widget14__header_menu">
<button type="button" class="btn btn-accent btn-md m-btn m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="modal" data-target="#createGroupModal"><i class="la la-plus"></i></button>
</div>
</div>
<div class="row align-items-center margin-bottom-15">
<div class="col">
<div class="form-group m-form__group">
<input class="form-control form-control-search m-input" autocomplete="off" type="text" name="" value="" placeholder="Search...">
</div>
</div>
</div>
<div class="row align-items-center margin-bottom-15">
<div class="col">
<div class="m-scrollable">
<div class="m-list-timeline m-list-timeline--skin-light">
<div class="m-list-timeline__items no-timeline">
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Group name</span></span>
<span class="timeline-subtitle"><span class="clr-grey">3 Contacts</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Group name</span></span>
<span class="timeline-subtitle"><span class="clr-grey">3 Contacts</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Group name</span></span>
<span class="timeline-subtitle"><span class="clr-grey">3 Contacts</span></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="standard-widget">
<div class="m-widget14">
<div class="widget_header_menu margin-bottom-10">
<div class="m-widget14__header">
<h3 class="m-widget14__title">Contacts</h3>
<span class="m-widget14__desc">5 contacts</span>
</div>
<div class="m-widget14__header_menu">
<button type="button" class="btn btn-accent btn-md m-btn m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="modal" data-target="#createContactModal"><i class="la la-plus"></i></button>
</div>
</div>
<div class="row align-items-center margin-bottom-15">
<div class="col">
<div class="form-group m-form__group">
<input class="form-control form-control-search m-input" autocomplete="off" type="text" name="" value="" placeholder="Search...">
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col">
<div class="m-scrollable">
<div class="m-list-timeline m-list-timeline--skin-light">
<div class="m-list-timeline__items no-timeline">
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user2.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Benson John</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user1.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Clark Anna</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user4.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Grohl Dave</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user3.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Porter Ella</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user5.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Wood Kelly</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Please help. Thanks.

There are many ways to define a template in Vue. For big templates I suggest to use X-Templates. Define a component referring template by id.
Vue.component('my-checkbox', {
template: '#checkbox-template',
data() {
return {
checked: false,
title: 'Check me'
}
},
methods: {
check() {
this.checked = !this.checked;
}
}
});
And define a template in your html file with appropriate id. Example:
<script type="text/x-template" id="checkbox-template">
<div class="checkbox-wrapper" #click="check">
<div :class="{ checkbox: true, checked: checked }"></div>
<div class="title"></div>
</div>
</script>
More and Source.

How to print only specific class value

I have 3 div's in a View. Every div has unique single_value. so when i click on any of that it should alert that data value. For that i used the following script
$(document).on('click','.single_school',function(){
var school = $( ".single_school" ).attr('data-value');
alert(school)
});
But the problem is i'm only getting the first value whatever div I clicked on. How do i print only the specific div I clicked on.
Here is the View:
<div class="col-md-2 col-sm-4 col-xs-12">
<div class="single_school" data-value="1">
<div class="selection_area choosen_school">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</div>
<div class="school_info">
<p class="school_name">ABC</p>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-12">
<div class="single_school" data-value="2">
<div class="selection_area choosen_school">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</div>
<div class="school_info">
<p class="school_name">XYZ</p>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-12">
<div class="single_school" data-value="3">
<div class="selection_area choosen_school">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</div>
<div class="school_info">
<p class="school_name">PQR</p>
</div>
</div>
</div>

$(document).on('click','.single_school',function(){
var school = $(this).attr('data-value');
alert(school)
});

You should use JQuery data() to fetch the value when clicked on the element. And secondly you should use $(this) to get the current element value and not the classname. In your code, it would always give one result because you are using $( ".single_school" ). This should be replaced with $(this):
$(document).on('click', '.single_school', function() {
var school = $(this).data('value');
alert(school)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2 col-sm-4 col-xs-12">
<div class="single_school" data-value="1">
<div class="selection_area choosen_school">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</div>
<div class="food_info">
<p class="school_name">ABC</p>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-12">
<div class="single_school" data-value="2">
<div class="selection_area choosen_school">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</div>
<div class="food_info">
<p class="school_name">XYZ</p>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-12">
<div class="single_school" data-value="3">
<div class="selection_area choosen_school">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</div>
<div class="food_info">
<p class="school_name">PQR</p>
</div>
</div>
</div>

How to get all the input elements data of a current div?

This is my HTML code:
<div data-repeater-item class="mt-repeater-item prescribeData">
<div class="mt-repeater-cell">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon input-circle-left capsule-lightblue">
<i class="fa fa-stethoscope blue-icon-font"></i>
</span>
<input type="text" id="prescribe_test" class="form-control typeahead-prescribetest input-circle-right" placeholder="Prescribe Test">
</div>
<span class="help-block">Name of Investigation</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon input-circle-left capsule-lightblue">
<i class="fa fa-stethoscope blue-icon-font"></i>
</span>
<input type="text" id="diagnosis_input" class="form-control typeahead-diagnosis input-circle-right" placeholder="Duration of Investigation (Optional)">
</div>
<span class="help-block">e.g. Once, Weekly, Monthly</span>
</div>
</div>
<div class="col-md-1 pull-right col-sm-6 col-xs-6">
<a href="javascript:;" style="margin-right:20px;" class="btn-circle prescribeAddData btn green-meadow mt-repeater-btn-inline"> <i class="fa fa-plus"></i>
</a>
</div>
</div>
</div>
</div>
I want to get all the input elements data in a variable using a JQuery code:
I am currently using this code:
$(document.body).on('click', 'a.prescribeAddData', function ()
{
console.log($(this).closest($(".prescribeData :input")));
});
But this code doesn't display the data that the elements are holding after inputting in it.
How can I fix this logic?

You can use the find method to find all elements that are children of a specific element then iterate over them, and store the values in an array for example.
var inputFields = $('.prescribeData').find('input');
var values = [];
inputFields.each(function(){
values.push($(this).val())
})
console.log(values)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-repeater-item class="mt-repeater-item prescribeData">
<div class="mt-repeater-cell">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon input-circle-left capsule-lightblue">
<i class="fa fa-stethoscope blue-icon-font"></i>
</span>
<input type="text" id="prescribe_test" class="form-control typeahead-prescribetest input-circle-right" placeholder="Prescribe Test">
</div>
<span class="help-block">Name of Investigation</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon input-circle-left capsule-lightblue">
<i class="fa fa-stethoscope blue-icon-font"></i>
</span>
<input type="text" id="diagnosis_input" class="form-control typeahead-diagnosis input-circle-right" placeholder="Duration of Investigation (Optional)">
</div>
<span class="help-block">e.g. Once, Weekly, Monthly</span>
</div>
</div>
</div>
</div>
</div>

Show 'Closest' div

Wonder if someone could point in the right direction here i'm trying to show the 'next' element on page with the matching class name i.e. the one directly underneath the link.
$(function() {
$("div.std-centered").hide();
$("a.show_hide").click(function(e) {
e.preventDefault();
$(this).closest('div.std-centered').next().show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-4 col sameHeight">
<p>Some blurb i</p>
</div>
<div class="col-sm-2 col text-center sameHeight">
<p><span class="glyphicon glyphicon-ok"> </span></p>
</div>
<div class="col-sm-2 text-center col sameHeight">
<p><span class="glyphicon glyphicon-ok"> </span></p>
</div>
<div class="col-sm-2 text-center col sameHeight">
<p><span class="glyphicon glyphicon-ok"> </span></p>
</div>
<div class="col-sm-2 text-center col sameHeight">
<p><span class="glyphicon glyphicon-ok"> </span></p>
</div>
</div>
<div class="row">
<div class="col-sm-12 std-centered">
<p>This is the content</p>
</div>
</div>
The div with the class std-centered is hidden (in jQuery) and I'm trying to find and show it when the show_hide link is clicked.
But I just can't seem to get a handle on that div. Could someone point me in the right direction please?
Thanks,
C

The issue is because closest() searches up the DOM to find parent elements, yet the .std-centered div is a sibling of a parent and hence will not be found.
To fix this you could instead use closest() to find the .row, then the next('.row') and finally find() to get the element you want, like this:
$(function() {
$("div.std-centered").hide();
$("a.show_hide").click(function(e) {
e.preventDefault();
$(this).closest('.row').next('.row').find('div.std-centered').show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-4 col sameHeight">
<p>Some blurb i</p>
</div>
<div class="col-sm-2 col text-center sameHeight">
<p><span class="glyphicon glyphicon-ok"> </span></p>
</div>
<div class="col-sm-2 text-center col sameHeight">
<p><span class="glyphicon glyphicon-ok"> </span></p>
</div>
<div class="col-sm-2 text-center col sameHeight">
<p><span class="glyphicon glyphicon-ok"> </span></p>
</div>
<div class="col-sm-2 text-center col sameHeight">
<p><span class="glyphicon glyphicon-ok"> </span></p>
</div>
</div>
<div class="row">
<div class="col-sm-12 std-centered">
<p>This is the content</p>
</div>
</div>

Use this selector $(this).closest('div.row').next(".row").find('.std-centered').show();
Closest() -> find the first parent with specified parameter
$(function() {
$("div.std-centered").hide();
$("a.show_hide").click(function(e) {
e.preventDefault();
$(this).closest('div.row').next(".row").find('.std-centered').show();// since element std-centered is found in row tthat is next to row that is closest to show_hide
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row">
<div class="col-sm-4 col sameHeight">
<p>Some blurb click</p>
</div>
<div class="col-sm-2 col text-center sameHeight">
<p><span class="glyphicon glyphicon-ok"> </span></p>
</div>
<div class="col-sm-2 text-center col sameHeight">
<p><span class="glyphicon glyphicon-ok"> </span></p>
</div>
<div class="col-sm-2 text-center col sameHeight">
<p><span class="glyphicon glyphicon-ok"> </span></p>
</div>
<div class="col-sm-2 text-center col sameHeight">
<p><span class="glyphicon glyphicon-ok"> </span></p>
</div>
</div>
<div class="row">
<div class="col-sm-12 std-centered">
<p>This is the content</p>
</div>
</div>

Toggle Disabled to Unable Text Fields in Sections

I am working on a new concept to allow Users to made update their account profile without the need to reload the screen to allow for updates.
Currently, I have two sections that will display the information they already submitted. By default, all field are disabled. Each section contain an "Edit" button to allow for modifications.
The problem that I am facing is that my "Edit" buttons are enabling editing on all sections, not their own section.
Toggle Disabled fields for editing in Sections
Here's the HTML code:
<div class="container">
<p>User should use the "Edit" button to correct any information separated in the form sections, individually.
User should be allowed to submit individual sections with updated information.</p>
<br />
<form name="ReviewInformation" method="post" class="clearfix">
<section id="NameConfirmation" style="background-color: #F1F3F2; border-radius: 8px; clear: both;" class="border-gray">
<!-- FIRST AND NAME SECTION -->
<div class="col-lg-12 no-padding no-margin clearfix">
<div class="col-md-11 col-sm-11 col-xs-11 no-padding no-margin">
<h1 class="h1-header"><i class="fa fa-users"></i> First & Last Name Section</h1>
</div>
<div class="col-md-1 col-sm-1 col-xs-1 no-padding no-margin">
<div class="positioning">
<input type="button" class="btn btn-warning" value="Edit" />
</div>
</div>
<div class="col-md-12 spacer"></div>
<div class="col-mg-12 horizontal-line"></div>
<div class="col-md-12 spacer"></div>
</div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" id="UserEmail" name="UserEmail" class="form-control" placeholder="First Name" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" id="UserPhone" name="UserPhone" class="form-control" placeholder="Last Name" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
</div>
<div class="clearfix"></div>
<!-- /FIRST AND LAST NAME SECTION/ -->
</section>
<div class="col-lg-12 spacer"></div>
<hr class="horizontal-line" />
<div class="spacer"></div>
<section id="EmailPhoneConfirmation" style="background-color: #E5F2F5; border-radius: 8px; clear: both;" class="border-gray">
<!-- EMAIL AND PHONE SECTION -->
<div class="col-lg-12 no-padding no-margin clearfix">
<div class="col-md-11 col-sm-11 col-xs-11 no-padding no-margin">
<h1 class="h1-header"><i class="fa fa-envelope"></i> Email & Phone# Section</h1>
</div>
<div class="col-md-1 col-sm-1 col-xs-1 no-padding no-margin">
<div class="positioning">
<input type="button" class="btn btn-warning" value="Edit" />
</div>
</div>
<div class="col-md-12 spacer"></div>
<div class="col-mg-12 horizontal-line"></div>
<div class="col-md-12 spacer"></div>
</div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="emailaccount#isp.com" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="801-999-9999" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
</div>
<div class="clearfix"></div>
<!-- EMAIL AND PHONE SECTION -->
</section>
<div class="clearfix"></div>
<hr />
<div class="clearfix"></div>
<div class="align-text-center">
<button type="sumbit" id="myForm" class="btn btn-success">Submit Form</button>
</div>
</form>
</div>
Here's the JS:
<script>
(function($) {
$.fn.toggleDisabled = function() {
return this.each(function() {
var $this = $(this);
if ($this.attr('disabled')) $this.removeAttr('disabled');
else $this.attr('disabled', 'disabled');
});
};
})(jQuery);
$(function() {
//$('input:editlink').click(function() {
$('input:button').click(function() {
$('input:text').toggleDisabled();
});
});
</script>
Here's the DEMO: https://jsfiddle.net/UXEngineer/7tft16pt/35/
So, I am trying to get individual editing enable only the section they are associated with.
Can anyone help with this issue? I would appreciate any help, thanks!

You can use:
$(function() {
$('input:button').click(function() {
$(this).closest('.col-lg-12').next().find('input:text').toggleDisabled();
});
});
Demo: https://jsfiddle.net/7tft16pt/38/
Use closest() -> https://api.jquery.com/closest/ , and next() -> https://api.jquery.com/next/

Categories

Resources