JQuery возвращает имя ввода

Question

Хорошо, поэтому я работал над этой системой, которая должна возвращать значение атрибута name внутри тега, но независимо от того, какую кнопку я нажимаю, я все еще получаю имя первого ...

$(document).ready(function() { 
 

 
    $(".vehicles-sub").click(function() { 
 
    $('.popup_content').show(); 
 
    $('.black_overlay').show(); 
 
    var name = $("button").attr("name"); 
 
    alert(name); 
 

 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="vehicles_case_form"> 
 
    <div class='vehicle_top_form'> 
 
    <h1>Vehicle Four</h1> 
 
    <hr/> 
 
    </div> 
 

 
    <div class='vehicles_bottom_form'> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever...</p> 
 
    </div> 
 

 
    <div class='vehicles_button_form'> 
 
    <button class="vehicles-sub" type="submit" name="submit_vehicles_first"> <!-- first name --> 
 
     <i class="fa fa-shopping-cart fa-lg" aria-hidden="true"></i>&nbsp;PURCHASE 
 
    </button> 
 
    </div> 
 

 
</div> 
 

 
<div class="vehicles_case_form"> 
 
    <div class='vehicle_top_form'> 
 
    <h1>Vehicle Five</h1> 
 
    <hr/> 
 
    </div> 
 

 
    <div class='vehicles_bottom_form'> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever...</p> 
 
    </div> 
 

 
    <div class='vehicles_button_form'> 
 
    <button class="vehicles-sub" type="submit" name="submit_vehicles_second"> <!-- second name --> 
 
     <i class="fa fa-shopping-cart fa-lg" aria-hidden="true"></i>&nbsp;PURCHASE 
 
    </button> 
 
    </div> 
 
</div>

Теперь проблема, когда я нажимаю кнопку, он всегда будет начеку submit_vehicles_first.

Answer 1

Используйте $(this) вместо того, чтобы обратиться к щелкнули текущую кнопку:

var name = $(this).attr("name"); 

Надеется, что это помогает.

$(document).ready(function() { 
 

 
    $(".vehicles-sub").click(function() { 
 
    $('.popup_content').show(); 
 
    $('.black_overlay').show(); 
 
    var name = $(this).attr("name"); 
 
    alert(name); 
 

 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="vehicles_case_form"> 
 
    <div class='vehicle_top_form'> 
 
    <h1>Vehicle Four</h1> 
 
    <hr/> 
 
    </div> 
 

 
    <div class='vehicles_bottom_form'> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever...</p> 
 
    </div> 
 

 
    <div class='vehicles_button_form'> 
 
    <button class="vehicles-sub" type="submit" name="submit_vehicles_first"> <!-- first name --> 
 
     <i class="fa fa-shopping-cart fa-lg" aria-hidden="true"></i>&nbsp;PURCHASE 
 
    </button> 
 
    </div> 
 

 
</div> 
 

 
<div class="vehicles_case_form"> 
 
    <div class='vehicle_top_form'> 
 
    <h1>Vehicle Five</h1> 
 
    <hr/> 
 
    </div> 
 

 
    <div class='vehicles_bottom_form'> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever...</p> 
 
    </div> 
 

 
    <div class='vehicles_button_form'> 
 
    <button class="vehicles-sub" type="submit" name="submit_vehicles_second"> <!-- second name --> 
 
     <i class="fa fa-shopping-cart fa-lg" aria-hidden="true"></i>&nbsp;PURCHASE 
 
    </button> 
 
    </div> 
 
</div> 
 
<br><br><br><br><br><br>