Develop Reference

Trigger function for multiple elements with same class

I have multiple div elements with similar buttons that have the same class name, I am trying to trigger the event handlers respective of the button I click. I have tried the "each" jquery function but it only triggers the first element. I tried using document on click too. i added stopPropagation and preventDefault too.
<div id="overview-comment-container" class="social-comment-container">
<ul class="comments-list">
<li class="posted-video-comment">
<div class="comment-body-divider"></div>
<div class="comment-list-divider" align="center" width="90%"></div>
<div class="comment-user-details">
<span class="delete-comment"><img id="erase-img" title="Delete comment" src="https://www.flaticon.com/premium-icon/icons/svg/484/484662.svg"></span>
<span class="edit-comment"><img class="edit-img" title="Edit comment" src="https://image.flaticon.com/icons/svg/61/61456.svg"></span>
</div>
<div class="commentinfo-block-wrapper">
<div id="distinct-user-comment" contenteditable="false">Salute</div>
</div>
<div class="comment-buttons" style="display: none;">
<button id="update-button" class="social-update-button"> Update </button>
<button id="cancel-button" class="social-cancel-button"> Cancel </button>
</div>
<div class="comment-body-divider"></div>
</li>
<li class="posted-video-comment">
<div class="comment-body-divider"></div>
<div class="comment-list-divider" align="center" width="90%"></div>
<div class="comment-user-details">
<span class="delete-comment"><img id="erase-img" title="Delete comment" src="https://www.flaticon.com/premium-icon/icons/svg/484/484662.svg"></span>
<span class="edit-comment"><img class="edit-img" title="Edit comment" src="https://image.flaticon.com/icons/svg/61/61456.svg"></span>
</div>
<div class="comment-block-wrapper">
<div id="distinct-user-comment"
contenteditable="false">Hello</div>
</div>
<div class="comment-buttons" style="display: none;">
<button id="update-button" class="social-update-button"> Update </button>
<button id="cancel-button" class="social-cancel-button"> Cancel </button>
</div>
<div class="comment-body-divider"></div>
</li>
</ul>
</div>
$( '.edit-img' ).each( function() {
$(this).click( function(e) {
e.stopPropagation();
var editComment = $( '#distinct-user-comment' );
var editCommentText = editComment.text();
$( '.delete-comment' ).css( "visibility", "hidden" );
$( '.edit-comment' ).css( "visibility", "hidden" );
editComment.html( '<textarea class="editPostedComment" placeholder="'+ editCommentText + '"style="width: 60%;">'
+ editCommentText +
'</textarea>' );
$( '.editPostedComment' ).one('focus', function() {
$( this ).text( editCommentText );
});
$('.comment-buttons' ).show();
});
});
$( '#cancel-button' ).click( function(e) {
e.stopPropagation();
e.preventDefault();
var onEditComment = $( '.editPostedComment' );
onEditComment.replaceWith('<div id="distinct-user-comment" contenteditable="false">' + onEditComment.attr('placeholder') + '</div>');
$( '.comment-buttons' ).hide();
$( '.delete-comment' ).css( "visibility", "visible" );
$( '.edit-comment' ).css( "visibility", "visible" );
});

The reason only first comment is handled is having same ID for multiple elements. ID is meant to be unique and only first of the element with same IDs are selected, always.
Secondly, you have to establish a context that identifies a comment and then refer everything inside that context. In your case it is the 'li' tag with class 'posted-video-comment'.
We will use JQuery's closest() method to find the parent 'li' and then use .find() method inside the 'li' every time we want to refer to an element, by class, for that comment.
Here is the html:
<div id="overview-comment-container" class="social-comment-container" style="border-bottom: 2px solid rgb(255, 255, 255);">
<ul class="comments-list">
<li class="posted-video-comment">
<div class="comment-body-divider"></div>
<div class="comment-list-divider" align="center" width="90%"></div>
<div class="comment-user-details">
<span class="distinct-user-name">Tope Babz</span>
<span class="distinct-timestamp">5 secs ago</span>
<span class="delete-comment"><img id="erase-img" title="Delete comment" src="https://www.flaticon.com/premium-icon/icons/svg/484/484662.svg"></span>
<span class="edit-comment"><img class="edit-img" title="Edit comment" src="https://image.flaticon.com/icons/svg/61/61456.svg"></span>
</div>
<div class="commentinfo-block-wrapper">
<div class="distinct-user-comment" contenteditable="false">Salute</div>
</div>
<div class="comment-buttons" style="display: none;">
<button class="social-update-button"> Update </button>
<button class="social-cancel-button"> Cancel </button>
</div>
<div class="comment-body-divider"></div>
</li>
<li class="posted-video-comment">
<div class="comment-body-divider"></div>
<div class="comment-list-divider" align="center" width="90%"></div>
<div class="comment-user-details">
<span class="distinct-user-name">Sergio</span>
<span class="distinct-timestamp">15 secs ago</span>
<span class="delete-comment"><img id="erase-img" title="Delete comment" src="https://www.flaticon.com/premium-icon/icons/svg/484/484662.svg"></span>
<span class="edit-comment"><img class="edit-img" title="Edit comment" src="https://image.flaticon.com/icons/svg/61/61456.svg"></span>
</div>
<div class="commentinfo-block-wrapper">
<div class="distinct-user-comment" contenteditable="false">Hello</div>
</div>
<div class="comment-buttons" style="display: none;">
<button class="social-update-button"> Update </button>
<button class="social-cancel-button"> Cancel </button>
</div>
<div class="comment-body-divider"></div>
</li>
</ul>
</div>
And here is the Javascript:
$('.edit-img').click(function(e) {
e.stopPropagation();
var $li = $(this).closest('.posted-video-comment');
var editComment = $li.find('.distinct-user-comment');
var editCommentText = editComment.text();
$li.find('.delete-comment').css("visibility", "hidden");
$li.find('.edit-comment').css("visibility", "hidden");
editComment.html('<textarea class="editPostedComment" placeholder="' + editCommentText + '"style="width: 60%;">' +
editCommentText +
'</textarea>');
$li.find('.editPostedComment').on('focus', function() {
$(this).text(editCommentText);
});
$li.find('.comment-buttons').show();
});
$('.social-cancel-button').click(function(e) {
e.stopPropagation();
e.preventDefault();
var $li = $(this).closest('.posted-video-comment');
var onEditComment = $li.find('.editPostedComment');
onEditComment.replaceWith('<div id="distinct-user-comment" contenteditable="false">' + onEditComment.attr('placeholder') + '</div>');
$li.find('.comment-buttons').hide();
$li.find('.delete-comment').css("visibility", "visible");
$li.find('.edit-comment').css("visibility", "visible");
});
And here is the working fiddle.

Open a Woocommerce tab from a separate icon on the single product page?

I need to add a custom functionality to a woocommerce single product page. The user needs to be able to click on an icon underneither the short description, which pops them down to the tab section, and opens the related tab.
Making it scroll down to the bottom is no problem, but opening the related tab I can not figure out. I have tried accessing the tab via URL (http://www.remicorson.com/access-woocommerce-product-tabs-directly-via-url/), but the problem with that is the page needs to reload. Any help I can get with this would be much appreciated.
Here is the code for the tabs I am working with:
function product_icon_set(){
echo "<div class='info-panel'>
<div class='learn_more img__wrap'>
<a href='#description_tab'><img class='icon_product img__img' src='http://webdev/rbo/wp-content/uploads/2017/09/Icon_MoreInformation_On.png.png' /></a>
<p class='img__description'>Desc.</p>
</div>
<div class='specs img__wrap'>
<a href='#specifications'><img class='icon_product img__img' src='http://webdev/rbo/wp-content/uploads/2017/09/Icon_Specifications_On.png.png' /></a>
<p class='img__description'>Specs.</p>
</div>
<div class='dimension img__wrap'>
<a rel='prettyPhoto' title='My Picture 1' href='https://webdev/rbo/wp-content/uploads/2017/09/ITD1013-Hanging-Hose-Rack-Dimensions.jpg'><img class='icon_product img__img' src='http://webdev/rbo/wp-content/uploads/2017/09/Icon_Demensions_On.png.png' /></a>
<p class='img__description'>Dimen.</p>
</div>
<div class='product_manual img__wrap'>
<a href='#tabs_product'><img class='icon_product img__img' src='http://webdev/rbo/wp-content/uploads/2017/09/Icon_OpsManual_On.png.png' /></a>
<p class='img__description'>Manual</p>
</div>
<div class='tech_tips img__wrap'>
<a href='#tabs_product'><img class='icon_product img__img' src='https://webdev/rbo/wp-content/uploads/2017/09/Icon_Tech-Tips_On.png-copy.png' /></a>
<p class='img__description'>Tech Tips</p>
</div>
<div class='instal_video img__wrap'>
<a href='#tabs_product'><img class='icon_product img__img' src='https://webdev/rbo/wp-content/uploads/2017/09/Installation_videos.png' /></a>
<p class='img__description'>Instal.</p>
</div>
</div>";
}
To recap, the user will click on a tab, that brings them to the tab section, and opens the related tab. Ex. Click specs icon, pop down to the section, and open the specifications tab.

I actually figured this out through jquery. You need to create a function that remove the class "active" from the current Li, then add it to the Li that you want active (the tab with the correct class), then do the same to the corresponding div ID for the content. Here is the function, along with tab code I am using.
function wc_change_tab() {
if( is_product() ) {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
// Activate Description Tab
$('.desc_tab_button').on('click', function () {
//disable active tab
$( 'li.active' ).removeClass( 'active' );
//enable desired tab
$( 'li.' + 'description' + '_tab' ).addClass( 'active' );
//disable active tab contents
$( 'div.active' ).removeClass( 'active' );
//enable desired tab contents
$( 'div#' + 'tab-description' ).addClass( 'active' );
});
// Activate Specs Tab
$('.specs_tab_button').on('click', function () {
//disable active tab
$( 'li.active' ).removeClass( 'active' );
//enable desired tab
$( 'li.' + 'additional_information' + '_tab' ).addClass( 'active' );
//disable active tab contents
$( 'div.active' ).removeClass( 'active' );
//enable desired tab contents
$( 'div#' + 'tab-additional_information' ).addClass( 'active' );
/*///// TEMPLATE FOR NEW ICON /// CHANGE OUT CLASS NAMES// Activate Specs Tab
$('.CHANGE_TO_ICON_CLASS').on('click', function () {
//disable active tab
$( 'li.active' ).removeClass( 'active' );
//enable desired tab
$( 'li.' + 'CHANGE_TO_TAB_CLASS_NAME' + '_tab' ).addClass( 'active' );
//disable active tab contents
$( 'div.active' ).removeClass( 'active' );
//enable desired tab contents
$( 'div#' + 'CHANGE_TO_TAB_ID_NAME' ).addClass( 'active' );*/
});
});
</script>
<?php
}
}
add_action( 'wp_footer', 'wc_change_tab', 26 );
// Icon Set
function product_icon_set(){
echo "<div class='info-panel'>
<div class='learn_more img__wrap'>
<a href='#tabs_product' class='desc_tab_button'><img class='icon_product img__img' src='http://webdev/rbo/wp-content/uploads/2017/09/Icon_MoreInformation_On.png.png' /></a>
<p class='img__description'>Desc.</p>
</div>
<div class='specs img__wrap'>
<a href='#tabs_product' class='specs_tab_button'><img class='icon_product img__img' src='http://webdev/rbo/wp-content/uploads/2017/09/Icon_Specifications_On.png.png' /></a>
<p class='img__description'>Specs.</p>
</div>
<div class='dimension img__wrap'>
<a rel='prettyPhoto' title='My Picture 1' href='https://webdev/rbo/wp-content/uploads/2017/09/ITD1013-Hanging-Hose-Rack-Dimensions.jpg'><img class='icon_product img__img' src='http://webdev/rbo/wp-content/uploads/2017/09/Icon_Demensions_On.png.png' /></a>
<p class='img__description'>Dimen.</p>
</div>
<div class='product_manual img__wrap'>
<a href='#tabs_product'><img class='icon_product img__img' src='http://webdev/rbo/wp-content/uploads/2017/09/Icon_OpsManual_On.png.png' /></a>
<p class='img__description'>Manual</p>
</div>
<div class='tech_tips img__wrap'>
<a href='#tabs_product'><img class='icon_product img__img' src='https://webdev/rbo/wp-content/uploads/2017/09/Icon_Tech-Tips_On.png-copy.png' /></a>
<p class='img__description'>Tech Tips</p>
</div>
<div class='instal_video img__wrap'>
<a href='#tabs_product'><img class='icon_product img__img' src='https://webdev/rbo/wp-content/uploads/2017/09/Installation_videos.png' /></a>
<p class='img__description'>Instal.</p>
</div>
</div>";
}

jquery - closest seems not working

I have code something like that :
<div class="fieldset clearfix">
<h2 class="fieldset_title">Title <i class="indicator glyphicon pull-right glyphicon-chevron-down"></i></h2>
<div class="fieldsgroup_info"></div>
<div class="fieldsgroup">
....
</div>
</div>
When I do in jquery
$('.fieldset_title').click(function(){
$( this ).closest( ".fieldsgroup" ).hide();
});
Seems not working, do you have an idea why it doesn't work?
Thanks

.fieldsGroup is the sibling of .fieldset_title not its parent, so replace
$( this ).closest( ".fieldsgroup" ).hide();
with siblings
$( this ).siblings( ".fieldsgroup" ).hide();
Or as suggested by A.Wolff in his comment below
$( this ).nextAll(".fieldsgroup").first().hide();

using hasclass for multiple divs with one button Problems

I am trying to change the display property of a div based on if the carousel image is active at the time. I have gotten it to work but it only works when i doubleclick. With a single click it displays the div corresponding to the previous active image instead of the current one. Please HELP.
=====================================
CODE BELOW
HTML
<div class="container-fluid" id="siteImgs">
<div class="row col-xs-12 col-md-7">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" id="lg" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1" id="ma"></li>
<li data-target="#myCarousel" data-slide-to="2" id="sz"></li>
<li data-target="#myCarousel" data-slide-to="3"id="ti"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<img src="img/work/lookingGlass.png" alt="looking glass">
</div>
<div class="item">
<img src="img/work/mauriceSite.png" alt="maurice site">
</div>
<div class="item">
<img src="img/work/sza.png" alt="sza">
</div>
<div class="item">
<img src="img/work/tina.png" alt="tina">
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<!--INFORMATION DIVS-->
<div class="row col-xs-12 col-md-5 lookingGlass lg">
<h1>THE LOOKING GLASS</h1>
<p>Lorem ipsum</p>
</div>
<div class="row col-xs-12 col-md-5 lookingGlass ma">
<h1>MAURICEDANIELS.COM</h1>
<p>Lorem ipsum</p>
</div>
<div class="row col-xs-12 col-md-5 lookingGlass sz">
<h1>SZA</h1>
<p>Lorem ipsum</p>
</div>
<div class="row col-xs-12 col-md-5 lookingGlass ti">
<h1>TINA D. PHOTOGRAPHY</h1>
<p>Lorem ipsum</p>
</div>
JS/JQUERY
$( '.ma' ).hide();
$( '.sz' ).hide(),
$( '.ti' ).hide();
$( ".carousel-control" ).click(function() {
if ( $( '#lg' ).hasClass( "active" ) ) {
$( '.lg' ).show(),
$( '.ma' ).hide();
$( '.sz' ).hide(),
$( '.ti' ).hide();
}
if ( $( '#ma' ).hasClass( "active" ) ) {
$( '.ma' ).show(),
$( '.lg' ).hide();
$( '.sz' ).hide(),
$( '.ti' ).hide();
}
if ( $( '#sz' ).hasClass( "active" ) ) {
$( '.sz' ).show(),
$( '.lg' ).hide();
$( '.ma' ).hide(),
$( '.ti' ).hide();
}
if ( $( '#ti' ).hasClass( "active" ) ) {
$( '.ti' ).show(),
$( '.lg' ).hide();
$( '.sz' ).hide(),
$( '.ma' ).hide();
}
});
Full Example HERE

You can use the slide event for this.
$('#myCarousel').on('slide.bs.carousel', function (e) {
var index = $(e.relatedTarget).index();
var obj = $('[data-slide-to="' + index + '"]').attr('id');
$('.lookingGlass').hide(); // all individual hide() that you had in your code can be replaced by targeting the divs with class
$('.' + obj).show();
})
Fiddle demo
Also another way is to remove the ids from the carousel indicators and add it as a data-attribute to div.item something like this <div class="item" data-target="lg"> and use it like this
$('#myCarousel').on('slide.bs.carousel', function (e) {
var obj = $(e.relatedTarget).data('target');
$('.lookingGlass').hide();
$('.' + obj).show();
})
Demo fiddle

you could do something like that,
$( ".carousel-control" ).click(function() {
$(".carousel-indicators").each(function(){
var idActive = $(this).attr("id");
if($(".lookingGlass ").hasClass("idActive ")){
$(this).show();
}
$(".lookingGlass").hide();
});
});
And im not if its gonna work just wrote it here, can check it after 15 min from now on, but maybe its help you now.

I'm not sure if this will work, but looking at your site, and how the carousel works, there is a delay to which the class "active" is applied when images/slides are switching. I think whats happening is that this delay causes the carousel's bootstrap js to mismatch a little with your custom js, so that when you click, the previous slide is still active, then the bootstrap js kicks in and switches the slide, but your js has already executed, thus causing the mismatch in divs vs images displayed. Instead of using "active" class to determine, try using:
if ($('#ti').hasClass("next") || $('#ti').hasClass("prev") {
// do stuff here
}

Div is added to repeat

I started some time studying javascript, and I have some questions and was wondering if you can do this.
I have a div:
<div class="category"> </div>
it automatically repeats everytime I create a new category in a forum system. this is default "so there is no possibility to manually"
So wanted it to be added numbering for each category. thereby:
<div class="category1"> </div>
<div class="category2"> </div>
<div class="category3"> </div>
<div class="category4"> </div>
and so on, all this through jquery or javascript.
If it is possible what is the way?

jQuery solution:
$( ".category" ).each( function( index ) {
$( this ).addClass( "category"+(index+1) );
});
Result:
<div class="category category1"> </div>
<div class="category category2"> </div>
<div class="category category3"> </div>
<div class="category category4"> </div>
Solution 2:
$( ".category" ).each( function( index ) {
$( this ).removeClass( "category" ).addClass( "category"+(index+1) );
});
Result:
<div class="category1"> </div>
<div class="category2"> </div>
<div class="category3"> </div>
<div class="category4"> </div>
FIDDLE

HTML
<button id="category-button">Add Category</button>
<div id="category-container"></div>
Javascript
$('#category-button').on('click', function() {
var $container = $('#category-container'),
$elem = $('<div/>', {
"class": "category" + ($container.children().length + 1)
});
$container.append($elem);
});