当我单击自定义下拉菜单时，我试图在右侧获取图像。当我单击任何选项时，它将从该特定选项获取图像并获取该选项图像标签的 src 属性。然后它会显示该图像。
当我单击该选项时，它会获取源属性，但是当我单击任何选项时，我必须单击两次才能显示不同的图像。
这里是 JavaScript:
<script language="javascript">
function getCarBrand(li){
var x = li.getElementsByTagName('span')[0].textContent;
document.getElementById("car_brand").value = x;
var y = document.getElementById("car_brand_id_img").src;
document.getElementById("img_car").src = y;
document.getElementById("img_car").style.display = 'block';
}
</script>
<html>
<!-- for car brand -->
<label for="Vehicle">Select Your Vehicle/Make</label>
<div class="row">
<div class="col-lg-6">
<div class="mm-dropdown">
<a href="#" id="vehicle_brand">SELECT YOUR VEHICLE
BRAND<i class="fa fa-chevron-down"></i></a>
<ul id="vehicle_brand_id" >
<?php
$query1 = mysqli_query($db,"SELECT * FROM `vehicle`");
if (mysqli_num_rows($query1)> 0){
while ($row = mysqli_fetch_assoc($query1)){
$car_id=$row['id'];
$name=$row['name'];
$img = $row['image'];
?>
<li onclick="getCarBrand(this)" data-value="1">
<img src="asset/img/<?php echo $img; ?>" alt="" width="20" height="20" id="car_brand_id_img" />
<span><?php echo $name; ?></span>
</li>
</ul>
<input type="text" id="car_brand" name="Vehicle_brand" value="" />
<input type="text" id="car_b" name="Vehicle_brand" value=""/>
</div>
</div>
<div class="col-lg-6">
<img src="" id="img_car" height="100" width="100" style="display: none;"/>
</div>
</div>
</html>
最佳答案
文档中存在重复的 id，因为 car_brand_id_img 在调用 getElementById 时会导致问题，因为此行为未定义。您可以按标签名称或类别进行选择，也可以为每个汽车图像分配一个唯一的 ID。您可以将搜索限制为触发的元素并获取正确的 id，但由于强烈不鼓励这样做，所以我将采用其他方法。简化示例:
function getCarBrand(li) {
var x = li.getElementsByTagName('span')[0].textContent;
var y = li.querySelector("img").src;
console.log(y); // Now it gets the desired element every time
document.getElementById("car_brand").value = x;
document.getElementById("img_car").src = y;
document.getElementById("img_car").style.display = 'block';
}<!-- for car brand -->
<label for="Vehicle">Select Your Vehicle/Make</label>
<a href="#" id="vehicle_brand">SELECT YOUR VEHICLE BRAND<i class="fa fa-chevron-down"></i></a>
<ul id="vehicle_brand_id">
<li onclick="getCarBrand(this)" data-value="1">
<img src="asset/img/img1.jpg" alt="1" width="20" height="20" id="car_brand_id_img" />
<span>Car 1</span>
</li>
<li onclick="getCarBrand(this)" data-value="1">
<img src="asset/img/img2.jpg" alt="2" width="20" height="20" id="car_brand_id_img" />
<span>Car 2</span>
</li>
</ul>
<input type="text" id="car_brand" name="Vehicle_brand" value="" />
<input type="text" id="car_b" name="Vehicle_brand" value="" />
<div class="col-lg-6">
<img src="" id="img_car" height="100" width="100" style="display: none;" />
</div>关于javascript - 点击两次即可获取javascript中的source属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57529294/