为什么我的 js 函数无法将 css 显示属性设置为内联 img 标签？

目的:我试图创建一个网页，有水果的通用图像。当有人点击它时，水果图像会被6种不同类型水果的图像所取代(如苹果，橙子，香蕉等)。每行有3张图片(所以，总共有2行水果图片)。下面是我到目前为止的代码:

<!DOCTYPE html>
<html>
<head>
<style>
.Fruits img {border: 6px solid blue;
  width: 100px;
  height: 100px;
  cursor: pointer;
  display: none;
}
img {border: 6px solid blue;
  width: 100px;
  height: 100px;
  cursor: pointer;
}
</style>
</head>
<body>
<script>
function expand() {
  var fruit_all = document.getElementsByClassName("Fruits"); 
  var fruit = document.getElementsByTagName("fruit_all[0].img")
  for (j = 0; j < fruit.length; j++) {
    fruit[j].style.display = 'inline';
  } 
  var replaced = document.getElementsByTagName("img");
  replaced[0].style.display = 'none';
}
</script>
<h1>Fruit</h1>
<!--Generic Fruits image-->
<img src="https://wpcdn.us-east-1.vip.tn-cloud.net/www.hawaiimagazine.com/content/uploads/2020/12/exoticfruits-opener.jpg" 
height="100" width="100" onclick="expand()">
<!--This is what replaces the Generic Fruits image-->
<div class="Fruits">
<img src="https://foodprint.org/wp-content/uploads/2018/10/IMG_3392-e1539129880189.jpg" 
height="100" width="100">
<img src="https://foodprint.org/wp-content/uploads/2018/10/imageedit_127_5581342771.jpg" 
height="100" width="100">
<img src="https://i0.wp.com/moodymoons.com/wp-content/uploads/2016/02/img_8986.jpg?fit=4560%2C3000&ssl=1" 
height="100" width="100">
<img src="https://www.naturalhealth365.com/wp-content/uploads/2016/04/blueberries.jpg" 
height="100" width="100">
<img src="https://th.bing.com/th/id/OIP.gBifOTB-F-wBTx3bzYPiGgHaE-?pid=ImgDet&rs=1" 
height="100" width="100">
<img src="https://th.bing.com/th/id/OIP.3yrzbKoKIgyR7eBhHma26AHaGm?pid=ImgDet&rs=1" 
height="100" width="100">
</div>
</body>
</html>

我很确定问题出在我的expand()函数上。我要做的是获取.Fruits img类型的所有元素(因此，img标签嵌套在Fruits类中)。然后，我将display属性更改为inline。

点击后，普通水果图像消失，但6张水果图像(2行3列)不出现。

可能像这样:

function expand() {
  var cls_fruits_div = document.getElementsByClassName('Fruits')[0];
  cls_fruits_div.style.display = 'block';
  var first_img = document.getElementsByTagName('img')[0];
  first_img.style.display = 'none';
}
function select(el){
 var new_img = el.src;
 var first_img = document.getElementsByTagName('img')[0];
 first_img.src =  new_img;
 first_img.style.display = 'inline-block';
 var cls_fruits_div = document.getElementsByClassName('Fruits')[0];
 cls_fruits_div.style.display = 'none';
}

img {
  border: 6px solid blue;
  width: 100px;
  height: 100px;
  cursor: pointer;
}
.Fruits{
  display: none;
}

<h1>Fruit</h1>
<!--Generic Fruits image-->
<img src="https://wpcdn.us-east-1.vip.tn-cloud.net/www.hawaiimagazine.com/content/uploads/2020/12/exoticfruits-opener.jpg" onclick="expand();">
<!--This is what replaces the Generic Fruits image-->
<div class="Fruits">
  <img src="https://foodprint.org/wp-content/uploads/2018/10/IMG_3392-e1539129880189.jpg" onclick="select(this);">
  <img src="https://foodprint.org/wp-content/uploads/2018/10/imageedit_127_5581342771.jpg" onclick="select(this);">
  <img src="https://i0.wp.com/moodymoons.com/wp-content/uploads/2016/02/img_8986.jpg?fit=4560%2C3000&ssl=1" onclick="select(this);">
  <br>
  <img src="https://www.naturalhealth365.com/wp-content/uploads/2016/04/blueberries.jpg" onclick="select(this);">
  <img src="https://th.bing.com/th/id/OIP.gBifOTB-F-wBTx3bzYPiGgHaE-?pid=ImgDet&rs=1" onclick="select(this);">
  <img src="https://th.bing.com/th/id/OIP.3yrzbKoKIgyR7eBhHma26AHaGm?pid=ImgDet&rs=1" onclick="select(this);">
</div>

相关内容

最新更新

热门标签：