html点击代参刷新当前页面,【已解决】html和bootstrap 4中支持点击每行跳转到新页面且传递参数...

折腾：

期间，接着需要去实现，对于每一行：

点击后，跳转到新页面。

所以有两个事情要弄：

支持每行点击的事件

然后跳转新页面

且支持传递参数，此处的book的id过去

bootstrap row support click

bootstrap support click

bootstrap row clickable

然后再去想办法获取到click的event中，被点击元素内部的url

然后可以用代码去点击后，实现页面跳转了：$(document).on("click", ".single_storybook_item", function(event) {

console.log("event=", event)

// console.log("single_storybook_item: thisValue=", $(this))

// window.location = $(this).data("href")

var curElement = $(this)

console.log("curElement=", curElement)

var bookUrl = curElement.find("#book_url").text()

console.log("bookUrl=", bookUrl)

var bookId = curElement.find("#book_id").text()

console.log("bookId=", bookId)

// window.location = bookUrl

})

其中取消注释：

window.location = bookUrl

即可跳转新页面：

所以，此处先去弄个新页面，供跳转

代码：

效果：

然后再考虑传递参数：

然后调试发现：

当页面消失时，再次进入，之前保存的值，还是存在的

-》需要想办法在，当前详情页消失时，清除掉之前保存的值

所以要去找到如何检测页面消失：

只不过，考虑到：

当页面返回或者被关闭，而去删除之前保存的book的id

这种做法：

虽然很干净，但是不利于页面保持之前的数据

尤其是：

别人把当前页面：

xxx/book_detail.html

去分享给其他人时，此时内部是没法保留bookid的

所以，还是考虑去把bookid的参数，放到url中。

所以再去：

更新，改为url带参数的写法，最后改为url中包含参数。

实现了自己要的效果：从前一页 点击每行后，跳转到新的 详情页，url中带上book的id详情页中 刷新 也可以保留url中参数-》可以加载book的信息

详情页中点击 返回前一页 ，再点击 下一页 回到详情页 也可以保留url中参数这个是浏览器实现了history的结果

从而实现了：详情页中，不论是刷新，还是返回再进来，都可以保留url中book参数，加载显示book信息。