Question

如果用户单击“双床房”或“特大床”，则“需求消息”中的内容必须更改“高需求”或“仅剩???个房间”。

由于存在逻辑，

按钮的ID将相同。现在，如果我单击“特大床”，我在“需求消息”上显示的消息不会改变。它可以正确显示“双床”。

是否可以通过获取具有data-bed-type属性的ID来匹配和更改消息（需求高或剩余房间数）来更改消息？

HTML：

<div class="col-lg-4 col-md-12 col-sm-12 col-12 left-container">
  <div class="demand-message--wrapper">
    <div class="demand-message"></div>
  </div>
  <div class="left-column">
    <div class="btn-group">
        <button type="button" data-bed-container-id="deluxe-balcony-room" data-bed-max="190" data-bed-type="twin">Twin Bed</button>
        <button type="button" data-bed-container-id="deluxe-balcony-room" data-bed-max="90" data-bed-type="king">King Bed</button>
    </div>
  </div>

JS：

function onToggleBed(e) {

    var thisButton = $(e.currentTarget);

    var bedTypeSelected = thisButton.data('bed-type');
    var bedValueSelected = thisButton.data('bed-value');

    var roomContianerId = thisButton.data('bed-container-id');

    var buttonMaxRoom = thisButton.data('bed-max');

    var message = '';
    if (buttonMaxRoom < 100) {
      message = 'Only ' + buttonMaxRoom + ' rooms left';
    } else if (buttonMaxRoom > 100) {
      message = 'In high demand';
    }

    if (message == '') {
      $('#' + roomContianerId + ' .demand-message').hide();
    } else {
      $('#' + roomContianerId + ' .demand-message').show();
      $('#' + roomContianerId + ' .demand-message').html(message);
    }
}

Answer 1

正如我在评论中提到的，连字符将被删除并变成驼色的情况。

在这种情况下，请使用：

var bedTypeSelected = thisButton.data('bedType');

让我们console.log(thisButton.data());查看您的数据项。

根据单击的切换按钮更改DIV内容

1 个答案: