我想做的是单击按钮并使其更新另一个div的背景。这些按钮是用 php 从文件中的 imgs 生成的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<title></title>
<style>
button{width: 100%; }
</style>
</head>
<body>
<div id="Navi" style="width: 150px; height: 640px;background: green;">
<?php
foreach (glob("*.png") as $filename) {
echo "<button id='$filename' onclick='change(event);'>".substr($filename, 0, -4)."</button></br>";
}
?>
</div>
<div id="ImgBig" style="height: 640px; width: 640px;margin-left: 150px; margin-top: -640px; background: blue;"></div>
<script>
function change(event){
$("#ImgBig").css("background-image", "url("+event.target.id+")");
}
</script>
</body>
请尝试在
php 目标中将event更改为this，以便将 javascript 函数应用于当前项目：
<?php
foreach (glob("*.png") as $filename) {
echo "<button id='$filename' onclick='change(this);'>".substr($filename, 0, -4)."</button></br>";
}
?>
然后在您的 JavaScript change函数中，只需删除target：
function change(event){
$("#ImgBig").css("background-image", "url("+event.id+")");
}