javascript - jQuery在更新后使用当前数据

Question

我正在尝试获取指定的当前状态seat，因此每个座位都有free开头的状态，并且状态将更改为'man', 'women'or 'child'。

因此，在我选择其中一种状态后，例如：freeto man! 我想提醒我更新的座位的当前状态，它显示的是旧状态free而不是man！这是代码：

我不能使用click()功能，因为我添加内容而不是单击.man, .woman或.child，所以我必须使用on()。

$(document).on("click", ".man, .women, .child", function() {
        var seatNumberHere = $(this).data("seat-number"); //Number of seat
        var seatPerson = $(this).data("person"); //Displays 'men', 'women' or 'child'

        $("[data-the-seat='" + seatNumberHere + "']").attr("data-status", seatPerson); //Updates the attribute data-status="free" to "men"
        alert($("[data-the-seat='" + seatNumberHere + "']").data("status")); //Here is the problem it shows still "free"
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="seat" style="top: 10px; left: 130px;"
          data-the-seat="1"
          data-status="free"
          data-toggle="popover"
          data-html="true"
          data-placement="top">
<div class='man' data-person='man' data-seat-number='1'>man</div><div class='women' data-person='women' data-seat-number='1'>women</div><div class='child' data-person='child' data-seat-number='1'>child</div>">
          1
        </div>

标签： javascriptjqueryhtml

Answer 1

在这里，您获得的数据将停留在最后访问的值上，因为您最后仅在 DOM 中更改此值

注意

• .attr()更改此元素 DOM 值并
• .data()会改变某个内存中的元素值

所以两个不同的东西

为了在 dom (attr) 或 memory (data) 中获得相同的值，您应该将值设置为它们

见下文片段：

$(document).on("click", ".man, .women, .child", function() {
    console.log(this);
    var seatNumberHere = $(this).data("seat-number"); //Number of seat
    var seatPerson = $(this).data("person"); //Displays 'men', 'women' or 'child'
    
    
    $("[data-the-seat='" + seatNumberHere + "']").attr("data-status", seatPerson);
    $("[data-the-seat='" + seatNumberHere + "']").data("status", seatPerson);
    //Updates the attribute data-status="free" to "men"
    
    alert("value of attr :"+$("[data-the-seat='" + seatNumberHere + "']").attr("data-status"));
    alert("value of data :"+$("[data-the-seat='" + seatNumberHere + "']").data("status")); //Here is the problem it shows still "free"
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="seat"
      style="top: 10px; left: 130px;"
      data-the-seat="1"
      data-status="free"
      data-toggle="popover"
      data-html="true"
      data-placement="top">
      <div class='man' data-person='man' data-seat-number='1'>M</div><div class='women' data-person='women' data-seat-number='1'>W</div><div class='child' data-person='child' data-seat-number='1'>C</div>"
      1
    </div>