jquery - how to get the class name outside the element in javascript -
< script type = "text/javascript" > $(function() { debugger; $(".price").click(function() { var result = $(this).find('.figure').text(); var result_t = $('.title').text(); $('#text').html('<form action="" method="">' + 'car model name : ' + result_t + '<br>' + '<br>' + 'price : ' + result + '<br>' + '<br>' + ' : first name' + '<input type="text" value="" />' + '<br>' + '<br>' + ' : last name' + '<input type="text" value="" />' + '<br>' + '<br>' + ' : mobile number' + '<input type="text" value="" />' + '<br>' + '<br>' + '<input type="submit" value="send quote" />' + '</form>'); $('#modal').modal(); return false; }); }); < /script><a class="inventory" href="http://prospectingdesk.com/demo/inventory-listing.html"> <div class="title">2009 porsche boxster base red convertible</div> <img src="./automotive car dealership & business html template_files/car-2-200x150.jpg" class="preview" alt="preview"> <table class="options-primary"> <tbody> <tr> <td class="option primary">body style:</td> <td class="spec">convertible</td> </tr> <tr> <td class="option primary">drivetrain:</td> <td class="spec">rwd</td> </tr> <tr> <td class="option primary">engine:</td> <td class="spec">2.9l mid-engine v6</td> </tr> <tr> <td class="option primary">transmission:</td> <td class="spec">5-speed manual</td> </tr> <tr> <td class="option primary">mileage:</td> <td class="spec">26,273</td> </tr> </tbody> </table> <table class="options-secondary"> <tbody> <tr> <td class="option secondary">exterior color:</td> <td class="spec">guards red</td> </tr> <tr> <td class="option secondary">interior color:</td> <td class="spec">platinum grey</td> </tr> <tr> <td class="option secondary">mpg:</td> <td class="spec">20 city / 30 hwy</td> </tr> <tr> <td class="option secondary">stock number:</td> <td class="spec">590271</td> </tr> <tr> <td class="option secondary">vin number:</td> <td class="spec">wp0ab2a74al060306</td> </tr> </tbody> </table> <img src="./automotive car dealership & business html template_files/carfax.png" alt="carfax" class="carfax"> <div class="price"><b>price:</b> <br> <div class="figure">$34,995 <br> </div> <div class="tax">plus sales tax</div> </div> <div class="view-details gradient_button"><i class="fa fa-plus-circle"></i> view details</div> <div class="clearfix"></div> </a>i have class name inventory.if click on class= price need popup window contains .i need title , price of particular element. have given code below
using below javascript if run title in full page.
try
$(function() { $(".price").click(function() { var result = $(this).find('.figure').text(); var result_t = $(this).siblings('.title').text(); $('#text').html('<form action="" method="">' + 'car model name : ' + result_t + '<br>' + '<br>' + 'price : ' + result + '<br>' + '<br>' + ' : first name' + '<input type="text" value="" />' + '<br>' + '<br>' + ' : last name' + '<input type="text" value="" />' + '<br>' + '<br>' + ' : mobile number' + '<input type="text" value="" />' + '<br>' + '<br>' + '<input type="submit" value="send quote" />' + '</form>'); $('#modal').modal(); return false; }); });<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.js"></script> <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.css"> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/js/bootstrap.js"></script> <a class="inventory" href="http://prospectingdesk.com/demo/inventory-listing.html"> <div class="title">2009 porsche boxster base red convertible</div> <img src="./automotive car dealership & business html template_files/car-2-200x150.jpg" class="preview" alt="preview"> <table class="options-primary"> <tbody> <tr> <td class="option primary">body style:</td> <td class="spec">convertible</td> </tr> <tr> <td class="option primary">drivetrain:</td> <td class="spec">rwd</td> </tr> <tr> <td class="option primary">engine:</td> <td class="spec">2.9l mid-engine v6</td> </tr> <tr> <td class="option primary">transmission:</td> <td class="spec">5-speed manual</td> </tr> <tr> <td class="option primary">mileage:</td> <td class="spec">26,273</td> </tr> </tbody> </table> <table class="options-secondary"> <tbody> <tr> <td class="option secondary">exterior color:</td> <td class="spec">guards red</td> </tr> <tr> <td class="option secondary">interior color:</td> <td class="spec">platinum grey</td> </tr> <tr> <td class="option secondary">mpg:</td> <td class="spec">20 city / 30 hwy</td> </tr> <tr> <td class="option secondary">stock number:</td> <td class="spec">590271</td> </tr> <tr> <td class="option secondary">vin number:</td> <td class="spec">wp0ab2a74al060306</td> </tr> </tbody> </table> <img src="./automotive car dealership & business html template_files/carfax.png" alt="carfax" class="carfax"> <div class="price"><b>price:</b> <br> <div class="figure">$34,995 <br> </div> <div class="tax">plus sales tax</div> </div> <div class="view-details gradient_button"><i class="fa fa-plus-circle"></i> view details</div> <div class="clearfix"></div> </a> <div id="modal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body" id="text"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div>
Comments
Post a Comment