Question

我已经使用– html/php/js/mysql创建了一个包含文件夹结构层次结构的网页。

因此，我已经创建了一个设计。它只是class为folders的父div，并且在所有文件夹中都以<h2>作为名称列出。通过PHP，我已将文件夹ID设置为每个文件夹div上的自定义属性：

<div class="folders">
   <div data-id="12452">
      <h2>Folder 1</h2>
   </div
   <div data-id="12453">
      <h2>Folder 2</h2>
   </div
   <div data-id="12454">
      <h2>Folder 3</h2>
   </div
</div>

现在，当有人点击folder one时，我想这样做，应该在url中设置一个get参数。

所以基本上是URL：

mywebpage.com/index.php ->'clicks folder' -> mywebpage.com/index.php?folder=12452

我有两个想法，例如，创建一个隐藏的表单，该隐藏的表单将在单击文件夹div时使用javascript提交，但是我不太确定哪种方法是最好的和最干净的。

感谢所有帮助。

Answer 1

您可以执行以下操作，在父级上添加点击处理程序，并跟踪单击了哪个子级，并获取其data-id

从那里您可以将 url 分配给form，然后使用form的{{1}}方法发布

堆栈片段

submit()

document.querySelector('.folders').addEventListener('click', function(e) {
  if (e.target.closest('div').dataset.id) {
     var url = "mywebpage.com/index.php?folder=" + e.target.closest('div').dataset.id;
     
     console.log(url);
     
     // e.g.
     /*
       var form = document.querySelector('form');
       form.action = url;
       form.hidden_field.value = "some value";
       form.submit();     
     */
  }
})

Answer 2

由于您使用的是jQuery，因此可以像下面的代码片段所示那样单击一下。

注意：：如果您希望从h2看起来像一个可点击的元素，请按照如下所示的CSS规则将光标更改为pointer：

.folders h2 {
    cursor: pointer;
}

$('.folders h2').click(function() {
  var folder_id = $(this).parent().data('id');

  //This line was added just for log purpose
  console.log('?folder=' + folder_id);

  //Uncomment the following line that will redirect you with folder "id" as parameter
  //location.href = '?folder=' + folder_id;
})

.folders h2 {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="folders">
  <div data-id="12452">
    <h2>Folder 1</h2>
  </div>
  <div data-id="12453">
    <h2>Folder 2</h2>
  </div>
  <div data-id="12454">
    <h2>Folder 3</h2>
  </div>
</div>

HTML表单：将div作为提交按钮

2 个答案: