Develop Reference

Script Revision for event.target

I'm kind of a newbie to js, could someone have a look at this code and tell me if it is correct and if it could be improved and how? it is working as intended, but honestly I don`t know if it is well written. Thanks in advance (:
<script>
$(document).ready(function() {
$("button").click(function(event) {
var a = (event.target).classList.item(0);
var b = ".carousel" + "." + a ;
$(b).myfunction;
});
});
</script>
The reason for that script is that I have a Carousel (Bootsrap) inside a Slider ("JQuery lightSlider") inside a custom popup modal and I don`t want the imgs carousel to load at page start only when the carousel would be visible.
What the script does is to "store" the class name of the button element ("custom-n") clicked, then write .carousel.custom-x to be stored in the variable b, and then use the var b as a selector to call the function for that custom-n carousel that replaces data-src with src.
I hope this isn't confusing haha
This is a simplification of the html, the modal opens whenever a <button> is clicked.
The are kind of a "thumbnail" for the main slider (light-slider), so:
<button class="custom-1"> opens the modal and set the "light-slider" to slide n1
<button class="custom-2"> opens the modal and set the "light-slider" to slide n2
and so on.
The carousels inside the lightslider's slides they all have img with data-src and the Idea is to replace the data-src with src of the carousel that should be "related" to the custom
<div class="light-slider-buttons">
<button class="custom-1 myclass"></button>
<button class="custom-2 myclass"></button>
<button class="custom-3 myclass"></button>
</div>
<div class="modal-wrp">
<div class="modal-inner">
<ul id="light-slider">
<li>
<div class="slide-wrapper">
<div class="carousel custom-1">
<div class="carousel-inner">
<div class="carousel-item active">
<img data-src="...">
</div>
<div class="carousel-item">
<img data-src="...">
</div>
<div class="carousel-item">
<img data-src="...">
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>

The code looks good.
I have two suggestions.
Firstly, you seem to be using class attribute to store data (custom-1, etc)
Why not set it to data-item-class attribute instead (any name starting with data- will do)?
<div class="light-slider-buttons">
<button class="myclass" data-item-class="custom-1"></button>
<button class="myclass" data-item-class="custom-2"></button>
<button class="myclass" data-item-class="custom-3"></button>
</div>
The value can be read as event.target.dataset.itemClass (item-class becomes itemClass, see docs for more info).
The code for variable a will be replaced with:
var a = event.target.dataset.itemClass;
Secondly, setting click event handler for 'button' selector is too wide.
It will cause errors when new button element with another purpose gets added to your page in the future.
It is much safer to think of <div class="light-slider-buttons"> as a component wrapping your button elements and apply the click handler only to those.
$(".light-slider-buttons button").click(function(event) {
...
}
It does not change much but is important because if you add other buttons outside <div class="light-slider-buttons"> they will not get click event handler.
jQuery uses CSS selectors syntax, you can find more in docs.
Here's the recommended code for script tag
<script>
$(document).ready(function() {
$(".light-slider-buttons button").click(function(event) {
var a = event.target.dataset.itemClass;
var b = ".carousel" + "." + a ;
$(b).myfunction;
});
});
</script>
P.S. jQuery programming style is quite imperative (specifying how page should update on every event).
There are other ways to build UI, for example in React programming is declarative (specifying how UI should look like based on given input/state)

Find out which close button closed an alertbox

I have an alert box with multiple close buttons:
<div data-alert class="alert-box cookies-consent">
<div class="informative-text">
Using cookies...
</div>
<div class="close-buttons">
Sure
Opt Out
</div>
</div>
I registered a handler for the close event as the docs suggest:
$(document).on('close.fndtn.alert', function(event) {
console.info('An alert box has been closed!');
console.info(event);
});
But unless I've missed it, the event doesn't seem to indicate which of the buttons was clicked.
How should I modify my HTML/JS to find out which of the close buttons was clicked? I don't want to modify Foundation's own JS, and I do want the UI behavior to remain consistent for both buttons, nice transitions and all.

Here is working spinet as #Panomosh mentioned above:
$('a.close').on('click',function(e){
console.log($(e.target).text())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-alert class="alert-box cookies-consent">
<div class="informative-text">
Using cookies...
</div>
<div class="close-buttons">
Sure
Opt Out
</div>
</div>
Greetings!

RemoveClass not responding to two part form

I have a form that I am controlling visually with jQuery. I am using removeClass to remove a few classes on the first part of the form, which works fine. However when the button is clicked to go to the second part of the form, the form is not responding to the removeClass and I can't figure out why this is happening. I have tried adding an event (below) to see if I am able to target the class/id within the div, but no luck either. Any suggestions would be greatly appreciated.
$(document).ready(function(){
$('input#createMember').click(function(){
$.find('account-edit-engagement-block').removeClass('col-md-6');
});
});
Ok Here is the code for the form. I am trying to remove the classes associated to this segment ""
<div class="form-container promo-carousel-lp__form">
<h4>Get $150 for signing up</h4>
<div class="account-edit-engagement-block"><script
src="/bundles/ActivationFormBlock?
v=FmZitrV3y_UtI4ysqjWZ2dKUPIGjPegx-dWRIDqgcrI1"></script>
<div id="activateAccount">
<div class="">
<div id="activationview"></div>
<div id="editview">
<script src="/bundles/AccountEdit?
v=V6iouLyL7iEfMRGYC4DTKQc8Yv95VNfdF_08-ZAgeRU1"></script>
<div id="editAccount">
<div class="row">
<div class="col-md-offset-3 col-md-6 col-xs-12">
<form action="/api/UserApi/EditUserAsync"

EDIT Try this again, iterate:
$(document).ready(function(){
$('input#createMember').click(function(){
$('.account-edit-engagement-block').each(function(ix,ex){
$(ex).find('.col-md-6').removeClass('col-md-6');
});
});
});
Fiddle HERE: https://jsfiddle.net/u5bLfrks/1/

Jquery show/hide button not working on homepage

I made a little button show hide code for my homepage. If I put that code in internal pages it works fine but if I put it on homepage it doesn't work. If I put Jquery CDN in header so my revolution slider stops working.
Here's my homepage section where you can see the code:
http://www.mythstreet.com/#our-services
Here's my fiddle that is fine working:
http://jsfiddle.net/junaidkhawaja/ha6qp7w4/6/
Here's snippet of my code:
HTML
<div id="1">
My Content 1
</div>
<div id="2" style="display:none;">
My Dynamic Content
</div>
<div id="static" style="display:none;">
My Static Content
</div>
<button id="btnClick">Click me!</button>
<hr />
<div id="3">
My Content 1
</div>
<div id="4" style="display:none">
My Dynamic Content
</div>
<div id="static2" style="display:none;">
My Static Content
</div>
<button id="btnClick2">Click me!</button>
Javascript:
$( document ).ready(function() {
$('#btnClick').on('click',function(){
if($('#1').css('display')!='none'){
$('#2').html($('#static').html()).show().siblings('#1').hide();
}else if($('#2').css('display')!='none'){
$('#1').show().siblings('#2').hide();
}
});
$('#btnClick2').on('click',function(){
if($('#3').css('display')!='none'){
$('#4').html($('#static2').html()).show().siblings('#3').hide();
}else if($('#4').css('display')!='none'){
$('#3').show().siblings('#4').hide();
}
});
});
Update: I found that after putting this code, my sliders is not working as well.

Just looking at your site and playing around in console, I can see that $ isn't defined.
A quick fix for this would be changing your code to use jQuery() instead of $(...)
Note: Can't currently debug this further as you've fixed the code on your live site (hooray!)

Looking at the code, at the very first line you miss the $
This one:
$( document ).ready(function()
Should be:
jQuery( document ).ready(function($)

Twitter Bootstrap and Javascript Alert issue?

I want to check for mozGetUsermedia in browser and if its not there return an alert.
I am using Twitter bootstrap Alert JS for the effect
and JS code to check the condition.
But my DOM seems to be broken and even though the condition is false the message is shown.
HTML Code
<div id="gum" >
<div class="alert alert-block alert-error fade in">
<button type="button" class="close" data-dismiss="alert">&times</button>
<h4 class="alert-heading">mozGetUserMedia is missing</h4>
<p>Do you have the latestNightly and set
<i>media.navigator.enabled</i> to true?
</p>
</div>
</div>
JS Code
if (!navigator.mozGetUserMedia) {
document.getElementById("gum").style.display = "block";}

you need to hide it by default
<div id="gum" class="hide">
Since you are using jQuery
$(function(){
if (!navigator.mozGetUserMedia) {
$("#gum").show();
}
});
Demo: Fiddle