时间戳

首页 > 解决方案 > 根据单击的切换按钮更改 DIV 内容

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

问题描述

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

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

是否可以通过获取具有数据床类型属性的 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);
    }
}

标签： javascriptjqueryhtmljson

解决方案

正如我在评论中提到的，hypens 将被删除并变成 camelCase。

在这种情况下使用：

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

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

推荐阅读