如何基于按钮在跨度元素中设置值

How to set values in span elements based on a button

本文关键字：元素 设置 何基于 按钮      更新时间：2023-09-26

我想做的是，我有不同的带有数据属性的自动按钮，当单击任何一个按钮时，该按钮中的数据都应该显示在不同的span元素中。

这是我的代码：

对于自动按钮。

 <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元素中的值。任何形式的帮助都将不胜感激。

它适用于将$(event.relatedTarget);更改为$(event.target);：jsbin

<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)
}
相关文章：