Develop Reference

How to replace inner html onClick on each loop

I'm trying to loop each thru of the attribute and if it matches, it will replace the inner HTML of the DOM. For this example, I'm trying to replace the data-product="momentum-shorts-2-0" inner HTML DOM which is the <h2>Momentum Shorts 2.0 NEW</h2> contents into the <div> class="compare-main" </div> that I've highlighted in the screenshot..
This is what I have with my code now but i'm stuck.. it keeps returning to me singular value of the last item..
<script>
jQuery( document ).ready(function() {
$( ".compare-filter-item" ).click(function() {
var selected_data_product = $(this).attr("data-product");
$(".compare-all .compare-products [data-product='" + selected_data_product + "']").each(function(){
new_html = $(this).html();
$(".compare-main .compare-products [data-product='" + selected_data_product + "']").each(function(){
$(this).html(new_html);
})
});
});
})
</script>
Issue:

<script>
jQuery( document ).ready(function() {
$( ".compare-filter-item" ).click(function() {
var selected_data_product = "momentum-shorts-2-0";
$(".compare-main .compare-products [data-product='" + selected_data_product + "']").each(function(){
$(this).find("h2").text("Momentum Shorts 2.0");
});
});
})
</script>
I tried to understand your requirement and here is the solution see if it help.

Slick slider function inside change function doesn't work

I have built a product page that has a colour variation select. I'm trying to make it work that when a user selects a colour from the dropdown the slick slider will go to the corresponding slide.
I have added data-attr to each slick slide that contain the colour name and use this to the slide index.
The slickgoto function works when I move it outside of the change function.
$( "#pa_colour" ).change( function() {
var prod_color = $( "#pa_colour option:selected" ).val();
var slide_index = parseInt( $( ".slider-for" ).find('[data-color="' + prod_color + '"]').data("slick-index") ) -1;
$( ".slider-for" ).slick( 'slickGoTo', slide_index, false);
});
Thanks

No sure the false is necessary. Have you tried:
$('.slide-for').slick('slickGoTo', slide_index);
Otherwise I would adjust it to:
var slideshow = $( ".slider-for" );
slideshow.slick({ ... });
$( "#pa_colour" ).change( function() {
var prod_color = $( "#pa_colour option:selected" ).val();
var slide_index = parseInt( $( ".slider-for" ).find('[data-color="' + prod_color + '"]').data("slick-index") ) -1;
slideshow.slick( 'slickGoTo', slide_index );
});
Hope this helps.

Retrieving jQuery data from dynamic HTML element returns undefined

I am trying to retrieve data from a variable HTML element. On click, the id of the <span> element is retrieved, which I want to enable me to dynamically $([dynamic id]) select that element and request the data stored in the data attribute.
My jQuery looks like this:
$( document ).ready( function() {
$( ".checkmark" ).on( "click", ( event ) => {
let checkBoxId = "#" + event.target.id, // #checkBox1
checkBoxData = event.target.id + "-value", // checkBox1-value
checkBoxValue = $( checkBoxId ).data( checkBoxData ); // undefined
} );
} );
The HTML element targeted looks like this:
<span class="checkmark" id="checkBox1" data-checkBox1-value=-155></span>
The value of let checkBoxValue is undefined and I cannot figure out why.
Help would be greatly appreciated.

You can get attribute value of span using attr() function in jQuery
checkBoxValue = $(checkBoxId).attr(checkBoxData);

The checkBoxId variable is unnecessary because you can use the this keyword since it is the current element you are working with.
$(function() {
$(".checkmark").on("click", (event) => {
let checkBoxData = event.target.id + "-value";
let checkBoxValue = $(this).data(checkBoxData);
});
});

It seems you are having scope issues with the new ()=>{} syntax.
So, you will need to bind this to the function event handler using {self:this}. If you don't want to do this, you can use the old function(){} syntax instead.
$( document ).ready( function() {
$( ".checkmark" ).on( "click", {self:this}, ( event ) => {
var checkBoxValue = $(this).data("checkbox1-value")
alert(checkBoxValue);
} );
} );
And also as #Erwin mentioned, use only lowercase in your data- attribute name:
<span class="checkmark" id="checkbox1" data-checkbox1-value="-155"></span>
JsFiddle

It's returning undefined because it is declared incorrectly. The part after data- should be in lower case. In your case, it must be
<span class="checkmark" id="checkbox1" data-checkbox1-value=-155></span>
for the .data() to work.

this code works for me try it ;)
$( document ).ready( function() {
$( ".checkmark" ).on( "click", function() {
var checkBoxId = "#" + $(this).attr('id');
var checkBoxData = $(this).attr('id') + "-value";
$( this ).attr('data-'+ checkBoxData, 155 );
} );
});
jsfiddle link

Copy all identified class to another class

If I click on the map, I copy all classes from class li class="salony" id="wojewodztwo-malopolskie" into class <div id="spisSalonow">. It's works correctly.
How can I do that, when I choice krakow from select(selector),Should I copy all classes with name krakow <div class="krakow"> into class <div id="spisSalonow">?
$( document ).ready(function() {
$("svg").delegate("*", "click", function(e) {
$('.st0').removeAttr('style');
var id = $(this).attr('id');
$(this).css("fill", "#ff6600");
//$('#spisSalonow').stop().slideDown("slow").css('opacity', '0').html($('#wojewodztwo-' + id).html()).animate({opacity: 1}, 1000).slideDown(500);
$('#spisSalonow').stop().slideDown("slow").css('opacity', '0').html($('#wojewodztwo-malopolskie').html()).animate({opacity: 1}, 1000).slideDown(500);
});
$("select" ).change(function() {
var allListElements = $(".krakow");
$( "#spisSalonow > div" ).find( allListElements );
var liczbaSalonow = jQuery('.' +$(this).val()).length;
//alert(jQuery('.' +$(this).val()).length);
$('#spisSalonow').stop().slideDown("slow").css('opacity', '0').html($('.' + $(this).val()).html()).animate({opacity: 1}, 1000).slideDown(500);
alert( $(this).val() );
});
});
JSFiddle

https://jsfiddle.net/4q8ud1pw/7/
Is this what you wanted?
Thanks to (jQuery get html of container including the container itself) for showing me how to include the container.
$("select" ).change(function() {
var html = '';
$(".krakow").each(function(){
html += $(this).wrap('<p/>').parent().html();
});
$('#spisSalonow').stop().slideDown("slow").css('opacity', '0').html(html).animate({opacity: 1}, 1000).slideDown(500);
});

Jquery : Append jquery variable to a class name

My code
$( ".attachPo" ).click(function() {
alert($(this).attr('id')) // prints 59
var id = $(this).attr('id');
$( '#attachPoForm_"+id+"').show(); // id name = attachPoForm_59
});
but which does not work for me , what is the correct vay of appending jQuesy variable to a class or id name

Your quotes aren't quite right. Change to:
$( '#attachPoForm_'+id).show();
This isn't a "jQuery variable", it's just simple Javascript variable and string concatenation.

Your selector is looking for an element with an id of (literally) #attachPoForm_"+id+", I think you mean:
$( '#attachPoForm_'+id).show();

Try this
$( ".attachPo" ).click(function() {
var id = this.id
$( '#attachPoForm_'+id).show(); // id name = attachPoForm_59
// ^^^^ Fixed the quotes here
});

$( ".attachPo" ).click(function() {
$( '#attachPoForm_'+ $(this).attr('id')).show(); //set id name = attachPoForm_59
});

A mistake at
$( '#attachPoForm_"+id+"').show(); // id name = attachPoForm_59
should be
$( '#attachPoForm_'+id+'').show(); // id name = attachPoForm_59

Try to use this.id like,
$( ".attachPo" ).click(function() {
var id=this.id;
alert(id);
$("#attachPoForm_"+id).show(); // id name = attachPoForm_59
});