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

Question

我试图获取指定座位的当前状态，所以每个座位在开始时都有状态free，状态将更改为 “男人”、“女人” 或 “ child ”。

因此，在我选择其中一种状态之后，例如:free to 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>

Answer 1

这里你得到的数据将停留在最后访问的值上，因为你最后只在 DOM 中更改它

注意

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

两个不同的东西

为了在 dom (attr) 或内存中获得相同的值 (数据)你应该为他们两个都设置值

见下面的片段:

$(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>