记录按下了哪个按钮?

Question

所以我有两个按钮，当点击它们导致相同的窗口。但是，我希望能够跟踪哪个按钮被按下了，这样我就可以根据它做不同的事情，下面是我如何定义它们的:

<div class = "buttons">
<button class = "worldBtn" onclick="window.location.href='map/map.html';">WORLD</button>
<br>
<button class = "usBtn" onclick="window.location.href='map/map.html';">UNITED STATES</button>
</div>

我有什么办法能做到这一点吗?谢谢!

Answer 1

使用URL查询参数区分它们

<div class = "buttons">
<button class = "worldBtn" onclick="window.location.href='map/map.html?loc=world';">WORLD</button>
<br>
<button class = "usBtn" onclick="window.location.href='map/map.html?loc=us';">UNITED STATES</button>
</div>

然后在map.html中，JavaScript可以检查window.location.search以确定使用了哪个按钮。

Answer 2

添加一个相同的类button on click使用$(this)你得到它的值属性。下面是一小段代码

$(".btn").click(function(e){
var title=$(this).attr("value");
alert(title);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class = "buttons">
<button class = "worldBtn btn" onclick="window.location.href='map/map.html';" value="WORLD">WORLD</button>
<br>
<button class = "usBtn btn" onclick="window.location.href='map/map.html';" value="UNITED STATES">UNITED STATES</button>
</div>

Answer 3

您可以使用click事件来跟踪哪个按钮被单击并相应地执行

HTML

<div class = "buttons">
<button id="btn1" class = "worldBtn">WORLD</button>
<br>
<button id="btn2" class = "usBtn">UNITED STATES</button>
</div>

Javascript使用JQuery

$('#btn1').on('click', function(e) {
e.preventDefault();
console.log('worldBtn clicked');
window.location.replace("map/map.html");
})
$('#btn2').on('click', function(e) {
e.preventDefault();
console.log('usBtn clicked');
window.location.replace("map/map.html");
})