0

我在网站的某个部分遇到问题，用户可以在其中单击许多按钮，并基于此确定他们按下了哪个按钮。有某些时间戳，他们选择保留哪个时间戳，我使用 foreach 来显示按钮，所以我不完全确定如何将其放入引导模式，但我无法做到。有任何想法吗？这是显示时间戳的部分：

<div class="container">
      <h1 class="text-center">Book for date: <?php echo date('d.m.Y', strtotime($date)); ?> </h1>
      <div class="row">
        <div class="col-md-12">
            <?php echo isset($msg)?$msg:""; ?>

        <?php
          $timeslots = timeslots($duration, $cleanup, $start, $end);
          foreach($timeslots as $ts){
          ?>
          <div class="col-md-2">
            <div class="form-group">
              <button class="btn btn-success book" data-bs-toggle="modal" data-bs-target="#myModal"><?php echo $ts ?></button>
            </div>
          </div>

        <?php }  ?>
      </div>
    </div>
  </div>

有什么想法我可以做些什么来弄清楚他们按下了哪个按钮而不会让它变得太乱？

4

1 回答 1

0

下面的代码片段实际上不会在 Stack 上运行，但应该显示如何拦截单击事件并从中访问属性以使用您认为合适的方式。由于clickhandler是用function而不是作为arrow函数定义的，您可以使用它this来引用按钮 - 或者您可以使用e.target

PHP 脚本应该可以访问 FormData 函数中定义的 post 变量 -set

document.querySelectorAll('button').forEach(bttn=>bttn.addEventListener('click',function(e){
  let url=location.href; // your php script.php perhaps
  let fd=new FormData();
      fd.set('button',this.textContent);
      fd.set('type',e.type);
      fd.set('target',e.target);
      fd.set('content',e.target.textContent);

  fetch( url, { method:'post', body:fd })
    .then(r=>r.text())
    .then(text=>{
      console.info(text)
    })
}))
<button 
  class="btn btn-success book" 
  data-bs-toggle="modal" 
  data-bs-target="#myModal">Timestamp #1</button>
  
<button 
  class="btn btn-success book" 
  data-bs-toggle="modal" 
  data-bs-target="#myModal">Timestamp #2</button>
  
<button 
  class="btn btn-success book" 
  data-bs-toggle="modal" 
  data-bs-target="#myModal">Timestamp #3</button>
  
<button 
  class="btn btn-success book" 
  data-bs-toggle="modal" 
  data-bs-target="#myModal">Timestamp #4</button>
  
<button 
  class="btn btn-success book" 
  data-bs-toggle="modal" 
  data-bs-target="#myModal">Timestamp #5</button>
  
<button 
  class="btn btn-success book" 
  data-bs-toggle="modal" 
  data-bs-target="#myModal">Timestamp #6</button>

于 2022-01-01T14:43:47.813 回答