<div class="priceStruct" id="priceStruct">
<h3>Pallet Cost Structure</h3>
<?php $i=1;
foreach($price_structure as $price_structure_list) {
$palletDetails = $price_structure_list['min']." - ".$price_structure_list['max'];
?>
<div class="display_content" id="price<?php echo $i; ?>">
<span class="first price" id="first<?php echo $i; ?>" ><?php echo $palletDetails." Pallets";?></span>
<span class="second price" id="second<?php echo $i; ?>">£<?php echo $price_structure_list['price'];?></span>
<span class="third price"><a href="#" class="breakDown" >Click Here for Break Down</a></span>
</div>
<?php $i++; } ?>
</div>
Try this. Class
should be second_price
instead of second price
. Dont forget to include jQuery library
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
$(function(){
$(".breakDown").click(function(){
spanValue = $('.second_price').text();
alert(spanValue);// just to check
});
});
Solution 1:
Add this to your a
tag:
onclick="alert($('#second<?php echo $i; ?>').text());"
So that it will result in:
<a href="#" class="breakDown" onclick="alert($('#second<?php echo $i; ?>').text());">Click Here for Break Down</a>
Solution 2:
You can also use jQuery's parent
and siblings
to find the correct span tag:
$(document).ready(function() {
$('.breakDown').click(function() {
alert($(this).parent().siblings('.second').text());
});
});
The disadvantage of solution 2 is that you'll run in problems when the structure of your HTML code is changed (the a
tag is no longer not a child of span
etc.)