I have a link with image
<div class="va-pickers">
<a class="va-picker" data-attribute="pa_Attribute">
<img class="va-picker-item" src="img.jpeg">
</a>
</div>
And I want to change span text ( change it ) on link click
<ul class="gform" id="gform_1">
<li id="field_1">
<div class="ginput_container">
<div class="medium" id="s2id_input_1_2">
<a class="select2-choice">
<span class="select2-chosen" id="select27">change it</span>
</a>
</div>
</div>
</li>
</ul>
I try
$(document).ready(function(){
$("a[data-attribute='pa_Attribute']").click(function(){
$('#gform_1').find('span').text('my_text');
});
});
But it doesn`t work
Thanks
Your code works find. Check in your console to see if nothing is missing (JQuery maybe). Here's your working fiddle.
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
Related
I am showing a set of products via shortcode in WordPress. The display has an image and button.
Problem: Only the photo contains the link to single product page. The associated button does not have the link to the single product page.
This is the current code:
<div class="display-products">
<div class="wpb_wrapper">
<div class="displayProduct-shortcode displayProduct-Container">
<div class="product_grid dp-section dp-group woocommerce" id="displayProduct">
<div class="dp_product_item dp-col dp-col_1_of_6 firstcol">
<div class="dp_images">
<a class="dp-product-image" title="Custom Made Wedding Cabinet" href="yahoo.com">
<div class="he-wrap tpl1">
<div class="dp-img-wrapper"> <img width="192" height="264" alt="#" class="attachment-display_product_thumbnail size-display_product_thumbnail wp-post-image" src="img_src"> </div>
</div> <span data-id="696" class="dpquickview dp_quickview_button"><img src="img_src"></span> </a>
</div>
<div class="dp-product-information clearfix">
<h2 class="product-name">
<a title="Custom Made Wedding Cabinet" href="#">Custom Made Wedding Cabinet</a>
</h2>
<div class="dp-stock"></div>
<div class="dp-grid-button"> <a class="single_add_to_cart_button button alt db_customButton" href="#">READ MORE</a> </div>
<div style="clear: both;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
Desired Output: I want to somehow iterate over each .single_add_to_cart_button and copy the link of every product-name to each READ MORE button
This is my current jquery code:
j('.display-products .displayProduct-shortcode .dp-product-information .dp-grid-button .single_add_to_cart_button').each(function() {
var getProductLink = j('.display-products .displayProduct-shortcode .dp-product-information .product-name > a').attr('href');
j(this).attr('href', getProductLink);
});
Set the href attribute value using the elements context. Use closest() to traverse up to dp-product-information element then find the desired anchor element the read its attribute and set the value.
Use
j('.display-products .displayProduct-shortcode .dp-product-information .dp-grid-button .single_add_to_cart_button').attr('href', function(){
return j(this).closest('.dp-product-information').find('.product-name>a').attr('href');
});
$(function() {
$('.dp-product-information .dp-grid-button .single_add_to_cart_button').attr('href', function() {
return $(this).closest('.dp-product-information').find('.product-name > a').attr('href');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dp-product-information clearfix">
<h2 class="product-name">
<a title="Custom Made Wedding Cabinet" href="#Test">Custom Made Wedding Cabinet</a>
</h2>
<div class="dp-stock"></div>
<div class="dp-grid-button">
<a class="single_add_to_cart_button button alt db_customButton" href="#">READ MORE</a>
</div>
<div style="clear: both;"></div>
</div>
Instead of assigning value for the different buttons with the links I would like to suggest you to use a common class (if you can) then trigger the click event for them:
$('.selector').on('click',function(){
$('.a-selector').trigger('click');
});
This is the html for the my ul,and on click of anchor tag data will be loaded from the other file tab2.html .
<ul class="list-unstyled " id="dist-tabs">
<li class="col-xs-3 student item ">
<a href="./tabs/tab2.html #1">
shimla
</a>
</li>
<li class="col-xs-3 staff item">
<a href="./tabs/tab2.html #2">
dharamshala
</a>
</li>
</ul>
<div id="dist-container">
</div>
Following is the content for the tab2.html , which will be loaded through ajax.
<div class="popup-overlay" id="1">
<div class="popup-box">
<h4>Name 1</h4>
<span class="close-btn">x close</span>
</div>
</div>
<div class="popup-overlay" id="2">
<div class="popup-box">
<h4>Name 2</h4>
<span class="close-btn">x close</span>
</div>
</div>
Every thing is working fine, popup opens just fine. But on click of close button with class="close-btn", the popup-box doesn't close
Following is the js i am using for the purpose stated above .
var containerId = '#dist-container';
var tabsId = '#dist-tabs';
$(document).ready(function(){
$(tabsId + ' A').click(function(){
loadTab($(this));
return false;
});
});
function loadTab(tabObj){
if(!tabObj || !tabObj.length){ return; }
$(containerId).addClass('loading');
$(containerId).fadeOut('fast');
$(containerId).load(tabObj.attr('href'), function(){
$(containerId).removeClass('loading');
$(containerId).fadeIn('fast');
});
$(".close-btn").click(function(){
$(containerId).fadeOut('fast');
});
}
I have tried a lot of code for popup through ajax but not successful so far. So please help me out
I am trying to get the Meet Some of Our Staff section to only show once the text "Meet Some of Our Staff" is clicked. I have used code that has gotten it to hide the section when "Meet Some of Our Staff" is clicked, but cannot figure out how to reverse it to where it is already hidden upon page load and then appears when "Meet Some of Our Staff" is clicked.
Script:
<script type="text/javascript">
function hideshow(which){
if (!document.getElementById)
return
if (which.style.display="block")
which.style.display="none"
else
which.style.display="block"
}
</script>
HTML:
<div class="content3">
<div class="title2">
<h1><center><a href="javascript:hideshow(document.getElementById('staff'))">Meet Some
of Our Staff</a></center></h1>
</div>
<div id="staff">
<center>
<ul>
<a href="http://www.instituteforcreativelearners.org/"
onclick="centeredPopup(this.href,'myWindow','500','300','yes');return false">
<li>
<img src="images/kami.jpg" alt="...">
<br />
<p><span class="stafftitle">Kami Barron</span> <br /> <span
class="staffsubtitle">Director of Education</span></p>
</li>
</a>
</ul>
</center>
</div>
</div>
Check
Sample - reformatted HTML/JS
Change
if (which.style.display="block")
to
if (which.style.display == "block")
if you are not setting display:none in CSS, then use this
if (!which.style.display || which.style.display == "block")
On what you want to be hidden apply the CSS rule display:none. Then in Javascript,
document.getElementsByTagName("a")[0].addEventListener("click",function(e)
{
document.getElementById("staff").style.display="block";
e.preventDefault()
});
Use CSS to hide the element when the page loads.
<div id="staff" style="display: none;">
That will hide the div until the user clicks on the link.
Edit: Check out this JSFiddle for a working example using your code
I am new to jQuery and am trying to write a script that will run through a menu list and display the correct background image based on the menu item. The menu list is going to be randomly populated so a script is necessary to load the correct image.
The problem is that the attribute where I am able to see which item the menu belongs to is not on the list item itself but on a div contained inside the list item. My question is is it possible to select a child element of the already selected element ?
E.g (the menuli a segment)
$(document).ready( function() {
$(menuli).each( function(index) {
$itemnumber = $(menuli a).attr("href");
switch($itemnumber) {
case 1:
$(this).css("background-image", "image01.jpg");
break;
}
});
});
This is more or less the script I am trying to get, where each list item is iterated through and depending on the href of the link inside the list item a background image is set to that list item.
EDIT
Here is my html:
<div id="divMenuSportGSXSports">
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=468&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl00_lnkSport" href="/Sport/Groups.aspx?IDSport=468&Antepost=0">
<span title="SOCCER">SOCCER</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=520&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl01_lnkSport" href="/Sport/Groups.aspx?IDSport=520&Antepost=0">
<span title="BASEBALL">BASEBALL</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=544&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl02_lnkSport" href="/Sport/Groups.aspx?IDSport=544&Antepost=0">
<span title="CRICKET">CRICKET</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=525&Antepost=0&Tema=Supabets)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl03_lnkSport" href="/Sport/Groups.aspx?IDSport=525&Antepost=0">
<span title="BASKETBALL">BASKETBALL</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=534&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl04_lnkSport" href="/Sport/Groups.aspx?IDSport=534&Antepost=0">
<span title="ICE HOCKEY">ICE HOCKEY</span>
</a>
</div>
</div>
<div class="VociMenuSportG">
<div class="ImgSport" style="background-image:url(../ImgSport.ashx?IDBook=53&IDSport=523&Antepost=0&)">
<img src="buttons_void.png">
</div>
<div class="NomeSport">
<a id="h_w_PC_cSport_repSport_ctl05_lnkSport" href="/Sport/Groups.aspx?IDSport=523&Antepost=0">
<span title="TENNIS">TENNIS</span>
</a>
</div>
</div>
</div>
Yes you can, use find
var parentElement = $('#someElement');
var childElement = parentElement.find('.child'); //where .child should be your child selector
Where as example code is not clear, I just gave answer to your question.
try to change this:
$(this).css("background-image", "image01.jpg");
to this:
$(this).children("div").css("background-image", "image01.jpg");
If you want to target the direct child of the element, better to use children() than find()
Please refer to this: What is fastest children() or find() in jQuery?
hello in the colde below i am trying to get the value of the third span from the img tag
here is the code :
<li class="art1">
<div class="infoArt">
<div class="infoArtTitle"><a name="3224502"></a>Chemise ML rose clair coupe droite motif bicolore</div>
<div class="infoArtPrice">
<br>
<span id="ctl00_mainColumnContent_universeCatalog_rptCatalog_ctl00_lblP" class="artP">39</span><br>
<span id="ctl00_mainColumnContent_universeCatalog_rptCatalog_ctl00_lblRetailerPrice" class="artOldP">90</span><br>
<span id="ctl00_mainColumnContent_universeCatalog_rptCatalog_ctl00_lblAvailability" class="artState">out</span>
</div>
</div>
<div class="imgArt">
<div class="infoWrapper" id="n3224502"><!-- id is new new for mdr -->
</div>
<a href="/vp4/_sales/ha/bufi/FR_0XQNB3L041/ikId3224502.aspx">
<img src="/vp4/_sales/ha/products/ev_3224502.jpg" alt="" style="">
</a>
</div>
<div class="btArt">
<a class="btSheetPdt" href="/vp4/_sales/ha/bufi/FR_0XQNB3L041/ikId3224502.aspx" title="fiche produit">
<span>fiche produit</span>
</a>
<span> </span>
</div>
</li>
I would like to get it from this query to get the out value :
document.getElementsByTagName('img")[0]
then I have no idea what I should do , could you please help.
Thanks.
You can access the third span from the img by:
document.getElementsByTagName("img")[0].parentNode.parentNode.previousSibling.getElementsByTagName("span")[2].innerHTML
You could use the ID of the element:
document.getElementById("ctl00_mainColumnContent_universeCatalog_rptCatalog_ctl00_lblAvailability")[0]
The Span is not inside the img tag in your case. If you're looking for the third span, you can try this
document.getElementsByTagName('span')[2].innerHTML