js判断img为空时,div隐藏

JS判断img为空隐藏div
该博客主要围绕使用JavaScript实现当img元素为空时隐藏div元素展开,涉及前端页面元素状态判断与显示控制的信息技术内容。
js判断img为空时,div隐藏


 
 第一种方式:js中案例
<script>
window,onload=function(){
var imgs=document.getElementsByTagName('img');
for(var i=0,j=imgs.length;i<j;i++){
(imgs[i].onerror=function(){
imgs[i].style.display='none';
})(); //注意这里的写法。形如(function(){...})(),这是js里的一种特殊写法,很有效。
}
}
</script>
<img src="">
<img src="http://www.baidu.com/1.jpg">
<img src="http://www.baidu.com/2.jpg">
<IMG src="http://www.baidu.com/3.jpg">


 第二种方式:jquer中案例  需要引用一个jquery.js

<script src="http://libs.baidu.com/jquery/1.4.2/jquery.min.js"></script>

<div class="pic">
<ul>
<li><img src="img/pic.png"></li>
<li><img src="">路径为空,隐藏此li标签</li>
<li><img src="">路径为空,隐藏此li标签</li>
<li><img src="img/pic1.png"></li>
</ul>
</div>

<script>
$(".pic li").each(function(){
    var src = $(this).find("img").attr("src");    //获取图片路径
    if(src == ""){
        $(this).hide();
    }
});
</script>


 </body>
</html>

 

### React 中控制 `img` 标签显示和隐藏的方法 在 React 中,可以通过条件渲染来控制组件或 DOM 元素的显示与隐藏。具体来说,可以使用状态管理工具(如 `useState`),并通过布尔值判断是否渲染指定的元素。 以下是一个完整的示例代码,展示如何通过按钮点击操作控制 `img` 标签的显示与隐藏: ```jsx import React, { useState } from 'react'; function App() { // 定义一个状态变量 isImageVisible 来控制图片的显示与否 const [isImageVisible, setIsImageVisible] = useState(true); // 处理显示/隐藏逻辑 const handleToggleImage = () => { setIsImageVisible(!isImageVisible); }; return ( <div style={{ textAlign: 'center', marginTop: '50px' }}> {/* 如果 isImageVisible 为 true,则渲染 img 标签 */} {isImageVisible && ( <img src="https://via.placeholder.com/150" alt="Example" style={{ maxWidth: '100%', height: 'auto' }} /> )} {/* 按钮用于切换图片的显示与隐藏 */} <button onClick={handleToggleImage} style={{ marginTop: '20px' }}> {isImageVisible ? '隐藏图片' : '显示图片'} </button> </div> ); } export default App; ``` #### 关键点解析 - **状态管理**:通过 `useState` 创建了一个名为 `isImageVisible` 的状态变量,默认初始值设为 `true` 表示图片可见[^3]。 - **条件渲染**:利用 JavaScript 的短路运算符 `&&` 实现条件渲染。只有当 `isImageVisible` 为真,才会渲染 `img` 标签。 - **事件处理**:定义了 `handleToggleImage` 函数,在每次点击按钮更新 `isImageVisible` 的值,从而达到切换的效果[^3]。 --- #### 可选扩展:动态更改图片路径 如果还需要动态修改图片路径,可以进一步增强功能。例如: ```jsx import React, { useState } from 'react'; function App() { const [imageSrc, setImageSrc] = useState('https://via.placeholder.com/150'); const [isImageVisible, setIsImageVisible] = useState(true); const handleToggleImage = () => { setIsImageVisible(!isImageVisible); }; const handleChangeImage = () => { setImageSrc(imageSrc === 'https://via.placeholder.com/150' ? 'https://via.placeholder.com/200' : 'https://via.placeholder.com/150'); }; return ( <div style={{ textAlign: 'center', marginTop: '50px' }}> {isImageVisible && ( <img src={imageSrc} alt="Dynamic Example" style={{ maxWidth: '100%', height: 'auto' }} /> )} <button onClick={handleToggleImage} style={{ marginRight: '10px' }}> {isImageVisible ? '隐藏图片' : '显示图片'} </button> <button onClick={handleChangeImage}> 更换图片 </button> </div> ); } export default App; ``` 在此扩展中,新增了一个状态变量 `imageSrc` 用来存储当前图片的 URL 地址,并提供另一个按钮实现图片更换的功能。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值