Develop Reference

Validate if 2 elements have same attribute value

In my e-commerce environment, I need a jQuery validation between 2 product attributes. Simplified it needs to check if the cart has a product which is present on the same page:
<! –– Cart ––>
<ul class="woocommerce-mini-cart cart_list product_list_widget ">
<li class="woocommerce-mini-cart-item mini_cart_item">
<a href="/example-product/" class="remove remove_from_cart_button" data-product_id="6735" data-cart_item_key="..." ></a>
</li>
</ul>
<! –– Product ––>
<article class="post-6735 product" data-id="6735">
<div class="product_wrapper">
<a href="?add-to-cart=6735" data-quantity="1" class="button add_to_cart_button" data-product_id="6735"</a>
</div>
</article>
I would like to be able to check if the attribute and its value from data-product_id within the cart is the exact same as in article a.button element. My approach:
jQuery('.woocommerce-mini-cart .remove_from_cart_button').attr('data-product_id').each( function() {
if( jQuery('article a.button')/*check if it is the same*/){
// do something here
}
});
As you can see the ID number 6735 is in more attributes. So perhaps a different way is also possible?

To get current_ProductId, You just need to get from $('article').data('id')
To loop through all mini cart items, You just need mini_cart_item
As you can see, we can get data attribute value by using data
var current_ProductId = $('article').data('id');
$('.mini_cart_item').each(function() {
var productId_MiniCartItem = $(this).find('a').data('product_id');
if(productId_MiniCartItem == current_ProductId){
// do something here
console.log("ProductId: " + productId_MiniCartItem + " has been ordered");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<! –– Cart ––>
<ul class="woocommerce-mini-cart cart_list product_list_widget ">
<li class="woocommerce-mini-cart-item mini_cart_item">
<a href="/example-product/" class="remove remove_from_cart_button" data-product_id="6735" data-cart_item_key="..." >6735</a>
</li>
<li class="woocommerce-mini-cart-item mini_cart_item">
<a href="/example-product/" class="remove remove_from_cart_button" data-product_id="6736" data-cart_item_key="..." >6736</a>
</li>
</ul>
<! –– Product ––>
<article class="post-6735 product" data-id="6735">
<div class="product_wrapper">
<a href="?add-to-cart=6735" data-quantity="1" class="button add_to_cart_button" data-product_id="6735"</a>
</div>
</article>

If you only need help to clarify your solution it would be
$('.woocommerce-mini-cart .remove_from_cart_button').each( function() {
if( $('article a.button').data('product_id') == $(this).data('product_id'){
// do something here
}
});
each iterate through collection of jquery elements.
This
jQuery('.woocommerce-mini-cart .remove_from_cart_button').attr('data-product_id')
is the single value, it would take the first element that finds and then executes attr on it.
UPDATE
To update all products button on site based on all products that are inside the card
var product_id = "";
var article = ".post-"; // class of article
$('.woocommerce-mini-cart .remove_from_cart_button').each( function() {
product_id = $(this).data('product_id')
article = article + product_id; // we add strings here, example .post-6225
$(article + " .product_wrapper a").attr('disabled', 'disabled');
});

OnMouseOver drop down not coming

onmouseOver of eacuser i want to show the change password as a dropdown(as can seen in attached image) but with my code changes i am getting change password next to eacuser link.Can anyone please give me some hint how to achieve.I attached the two image file.please check for reference
<div id="appLinks">
<ul id="appLinks_list" class="nav">
<span id="appLink_csrname" class="ui-state-default csrname"><a onmouseover="onMouseOver()">eacuser</span>
<li id="appLink_chngpwd" class="ui-state-default chngpwd">Change Password</li>
<li id="appLink_about" rtlOrder="3"><img src="${link.getContextPath()}${msg.get("icon.information")}" border="0px;" align="top">About</li>
<li id="appLink_logout" rtlOrder="2"><img src="${link.getContextPath()}${msg.get("icon.logout")}" border="0px;" align="top">LogOut</li>
<li id="appLink_help" rtlOrder="1"><a target="eachelp" href="$msg.get("eac.helpPath")"><img src="${link.getContextPath()}${msg.get("icon.help")}" border="0px;" align="top">Help</a></li>
</span>
</ul>
</div>
<script>
$(document).ready(function(){
$(".csrname").mouseleave(function(){
//$('#appLink_chngpwd').hide();
$(".csrname li").css("display","none");
});
$(".csrname").mouseover(function(){
//$('#appLink_chngpwd').show();
$(".csrname li").css("display","block");
});
</script>

use this,
<script>
$(document).ready(function(){
$('#appLink_chngpwd').hide();
$(".csrname").mouseover(function(){
$('#appLink_chngpwd').show();
});
$(".csrname").mouseleave(function(){
$('#appLink_chngpwd').hide();
});
});
</script>

In your code you have used like below.
$(".csrname li").css("display","none");
It means you are making display none for child property of span having class .csrname
At present in your code, "Change Password" is sibling element not a child.
So change your code like below.
$(".csrname + li#appLink_chngpwd").css("display","none");

How to change date-value?

I have a following HTML but I am not able to change the value of date-value and title. Can you please suggest how to do this?
<a title="Date::04/08/2013">
<span class="name">Date::</span>
<span data-value="04/08/2013" class="value">04/16/2013</span>
</a>
Sorry for the incomplete question.
Value 04/16/2013 is assigned using jQuery but the title="Date::04/08/2013" and data-value="04/08/2013" doesn't changed. I want "Date::04/08/2013" should be "Date::04/16/2013" and data-value="04/08/2013" should be data-value="04/16/2013".
Thanks in advance.

I think you have this
<a title="Date::04/08/2013" id='date-link'>
<span id="date-title" class="name">Date::</span>
<span id="date-value" data-value="04/08/2013" class="value">04/16/2013</span>
</a>
and you want following
<a title="Date::04/16/2013" id='date-link'>
<span id="date-title" class="name">Date::</span>
<span id="date-value" data-value="04/16/2013" class="value">04/16/2013</span>
</a>
If so, you can try following
var dateTitle = jQuery("#date-title").html()
var dateValue = jQuery("#date-value").html()
jQuery('#date-link').attr('title', dateTitle+dateValue);
jQuery('#date-value').attr('data-value', dateValue);
You can create a html file with following code and check your own
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<a title="Date::04/08/2013" id='date-link'>
<span id="date-title" class="name">Date::</span>
<span id="date-value" data-value="04/08/2013" class="value">04/16/2013</span>
</a>
Click Here
<script>
function abc() {
var dateTitle = jQuery("#date-title").html()
var dateValue = jQuery("#date-value").html()
jQuery('#date-link').attr('title', dateTitle+dateValue);
jQuery('#date-value').attr('data-value', dateValue);}
</script>

Try this :
$('span.value').attr("data-value", "04/16/2013")
.data("value") might not work, since value maps to something else.
Besides, try using some other keyword other than value, if possible.

html code:
<a title="Date" id="data">
<span class="name">Date::</span>
<span data-value="04/08/2013" class="value">04/16/2013</span>
</a>
js:
$("#data").find('span').attr("data-value", "04/16/2013");
try this u ll get data-value...

$('.value').attr('data-value',$('.value').html());

var value = $('.value').text();
$('.value').attr('data-value',value)

why i can not access the element with jquery

I have the following markup :
<div class="tutor-photo-slider">
<ul>
<li><a class="left-arrow" href="javascript:;"></a></li>
<li>
<ul id="carousel">
<li>
<a href="/assets/images/tutor-sample.png" class="slider-image">
<img src="/assets/images/tutor-sample-thumb.png" /></a>
</li>
</ul>
</li>
<li>
<a class="right-arrow" href="javascript:;"></a>
</li>
</ul>
</div>
when I do
$('.left-arrow').click(function() {
var elem = $(this).parents('ul').children('li').children('ul'),
children = elem.children('li');
for (var i = 0; i < children.length; i++) {
if ($(children[i]).css('display') != 'none') {
break;
}
}
$(children[i - 1]).show();
});
it doesn't access it.I tried debugging it in firebug but could not figure out the error.
I am including jquery 1.6.4. And I do not have errors.
edit: I am trying to make a carousel photo gallery http://jsfiddle.net/5xHFT/1/

Your code snippet is missing an
);
As in, instead of
$('.left-arrow').click(function() {}
do ...
$('.left-arrow').click(function() {} );
That can cause the error.

click function missing the closing brackets. here is working code.

as mentioned in the comment by Guffa, you probably are not doing this inside ready. Here is a fiddle to show you: http://jsfiddle.net/AVGTL/
after looking at the other fiddle, it is really just the missing )

try
jQuery('.left-arrow').click(function() {} );
some times using some plug-ins make some conflicts so just try to use jQuery instead of "$"

Seems okay with snippet which you have provided: http://jsfiddle.net/8zgqF/1/. Specify your question.

jquery variable?

I'm a jQuery novice, I have the following jQuery written to show a div when a specific link on a map is shown:
<div id="locationmap">
<a class="linkhide" id="link1" href="#">Occupier 1</a>
<a class="linkhide" id="link2" href="#">Occupier 2</a>
<a class="linkhide" id="link3" href="#">Occupier 3</a>
</div>
<div id="mapdetail">
<div class="hideme" id="local1" style="display:none;">
<p>Some content one</p>
</div>
<div class="hideme" id="local2" style="display:none;">
<p>Some content two</p>
</div>
<div class="hideme" id="local3" style="display:none;">
<p>Some content three</p>
</div>
</div>
<script type='text/javascript'>//<![CDATA[
$("#link1").mouseover(function() { $("#local1").fadeIn(500); });
$("#link2").mouseover(function() { $("#local2").fadeIn(500); });
$("#link3").mouseover(function() { $("#local3").fadeIn(500); });
$(".linkhide").mouseout(function() { $(".hideme").css('display','none'); });
//]]>
</script>
However, as you can see the .fadeIn(500) is being repeated for each link. How would I make this a variable once and call it for each line? This would save me repeating the same piece of code 30 times or so for each link.
I have a JSfiddle here: http://jsfiddle.net/karlgoldstraw/4NRY7/
Thanks.

function mouseOver(localId) {
return function() { $("#local" + localId).fadeIn(500); }
}
$("#link1").mouseover(mouseOver(1));

you could use a data-attribute to make the connection between the links and the div simpler,,,
<a data-id="2"...
$('a.linkhide').mouseover(function() {
var el = '#local' + $(this).data('id');
$(el).fadeIn(500);
});

Because i don't see it yet i thought i would add my answer here. Though i realize that the above answers are perfectly viable my solution lets the link tell the function what the content to show is called. By adding a javascript function that will inspect the hash value of the link you can use that as a selector to do your fadein's. This would also give the benefit of degrading better as the hash link would still put the user on the correct content in the event javascript is disabled.
JavaScript
var fade = function(){
var contentSelector = this.hash;
$(contentSelector).fadeIn(500);
};
Then to declare the mouseovers:
$("#linkone").mouseover(fade);
$("#linktwo").mouseover(fade);
$("#linkthree").mouseover(fade);
$("#linkfour").mouseover(fade);
Or you could even do it like this:
$(".linkhide").mouseover(fade);
Then on the HTML
<a class="linkhide" id="linkone" href="#content1">Link 1</a>
<a class="linkhide" id="linktwo" href="#content2">Link 2</a>
<a class="linkhide" id="linkthree" href="#content3">Link 3</a>
<a class="linkhide" id="linkfour" href="#content4">Link 4</a>
etc...
JSFiddle - http://jsfiddle.net/4NRY7/11/

This is one way that doesn't involve changing the HTML. As you can probably tell, changing the id of the link could make this much more efficient.
$(".linkhide").mouseover(function() {
var linkDivMap = { 'one' : 1, 'two' : 2, 'three' : 3, 'four' : 4 };
var contentBox =$(this).attr('id').replace('link','');
$("#content" + linkDivMap[contentBox] ).fadeIn(500);
});
$(".linkhide").mouseout(function() { $(".hideme").css('display','none'); });

Replacement for your current script.
This allows you to use a single dynamic function, and a single jQuery.mouseover() call, for all .linkhide elements, to avoid the duplication of code that still results from #MikeThomsen's answer.
$( document ).ready( function () {
$( ".linkhide" ).mouseover( function ( event ) {
var item_id = this.id.match( /([0-9]+)$/ )[1];
$( "#local" + item_id ).fadeIn( 500 );
} );
$( ".linkhide" ).mouseout( function () {
$( ".hideme" ).css( 'display', 'none' );
} );
} );