如何在javascript中获取元素之外的类名

时间：2015-08-05 11:05:58

标签： javascript jquery html5

＆＃13;
＆＃13; 
< 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>
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我有一个名为inventory的类。如果我点击class = price我需要一个弹出窗口，其中包含。我需要获取该特定元素的标题和价格。 我已经给出了以下代码

使用以下javascript如果我运行我将获得该整页的所有标题。

1 个答案:

答案 0 :(得分：0)

尝试

$(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">&times;</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>

相关问题
最新问题