如何設置基於按鈕的跨度元素中的值

Question

我想要做的是，我有不同的自動化按鈕與數據屬性，並且當單擊任何一個按鈕時，該按鈕中的數據應顯示在不同的跨度元素。

這裏是我的代碼：

對於自動按鈕。

<button 
     class="btn btn-sm btn-danger" 
     name="add_this_<?php echo $i; ?>" 
     id="add_this_<?php echo $i; ?>" 
     data-hname="<?php echo $hotel_name; ?>" 
     data-elem="<?php echo $i; ?>" 
     onclick="total_rate()"> 
Select 
</button> 

對於跨度元件：

<div class="col-md-12 padding-top-10"> 
    Hotels: <span id="hotels"></span> 
    </div> 

JS代碼：

功能Total_Rate的（）{

jQuery(document).ready(function($){ 

    var button = $(event.relatedTarget); 
    var elem = button.data('elem'); 
    var hname = button.data('hname'); 

    var s_tax = $("#s_tax_"+elem).val(); 
    var cost_em = $("#em_"+elem).val(); 
    var cat_cost = $("#sel_cat_"+elem).val(); 

    var rooms = $("#rooms").val(); 
    var per = $('#persons').val(); 
    var mattress = per - (rooms*2); 
    var cost_hotel = parseInt((cat_cost * rooms) + (cost_em * mattress)); 
    var cost_hotel_final = cost_hotel + (s_tax/100 * cost_hotel); 

    $("#total_cost").html(cost_hotel_final); 
    $("#hotels").html(hname); 


}); 

}

問題是我沒有得到span元素中的值。 任何類型的幫助，將不勝感激。

Answer 1

它爲我改變$(event.relatedTarget);與$(event.target);： jsbin

Answer 2

<button 
     class="btn btn-sm btn-danger" 
     name="add_this_<?php echo $i; ?>" 
     id="add_this_<?php echo $i; ?>" 
     data-hname="<?php echo $hotel_name; ?>" 
     data-elem="<?php echo $i; ?>" 
     onclick="total_rate(this)"> 
Select 
</button> 

function total_rate(elem) 
{ 
    var #elem = $(elem); 
    var id = #elem.attr("id"); 
    var datahname = #elem.attr("data-hname"); 
    var dataelem = #elem.attr("data-elem"); 

    //.....stuff and things 
    var $hotels = $('#hotels'); 
    $hotels.html(datahname) 
}