javascript - js或者jq判断span标签是否为空并触发事件-PHP中文网问答

微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程

javascript - js或者jq判断span标签是否为空并触发事件

ringa_lee 2017-04-11 10:38:56

[JavaScript讨论组]

1397

span标签初始是空值，，，然后我想让span标签不为空的时候，另外一个按钮变色，，，怎么实现呢？

这个span不为空的时候
这个span变色

ringa_lee

全部回复(6)

PHPz2017-04-11 10:40:56 6楼

在你改变 #total 内容的地方，判断是否有值，动态设置你要变色的那个 span 的 class 或者 style 就可以实现了。

https://jsfiddle.net/xan4h58e/

赞 +0

添加回复

PHPz2017-04-11 10:40:56 5楼

$(function(){
    var $span=$('span');
    $span.on('click',function(){
        if($(this).html()!==''){
            alert(1);
            $(this).html('');
        }else{
            alert(2);
            $(this).html('1111');
        }
    });
});

是这意思么？

赞 +0

添加回复

阿神2017-04-11 10:40:56 4楼

参考下面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span{padding: 10px 20px;background: #abcdef;}
    </style>
</head>
<body>
    <input type="text" id="txt"><input type="button" id="btn" value="添加"><br /><br /><br /><br />
    <span id="total"></span><br /><br /><br /><br />
    <span id="btnpay">确定</span>
    <script>
        var total=document.getElementById("total"),
            btnpay=document.getElementById("btnpay"),
            txt=document.getElementById("txt"),
            btn=document.getElementById("btn");
        btn.onclick=function(){
            total.innerHTML=txt.value;
            // 判断如果total中有值得时候，btnpay变颜色
            if(total.innerHTML!=""){
                btnpay.style.background="#f00"
            }
        }
        
    </script>
</body>
</html>

赞 +0

添加回复

PHP中文网2017-04-11 10:40:56 3楼

判断标签内容是否为空

var html = $('span').html();
if(html == null){
    alert('空');
    // 执行变色
}

至于按钮变色，我建议通过class，定义一个叫 .hide的class ，效果为按钮灰色。

<style>
.hide{
    background:??;
}
</style>

通过addClass 添加类、removeClass 删除类、 hasClass 判断是否存在类

更新答案

// 当页面载入的时候
$(document).ready(function() {
    // 判断span标签是否为空的
    if($('.total').html() == null){
        // 如果是,就给你的pay按钮添加一个hide的class
        $('.btnpay').addClass('hide');
    }
});

// 接着你写一个hide的类，用来控制颜色，让按钮看着像是灰色就可以了。
// 至于移除这个class
$('.btnpay').removeClass('hide');

赞 +0

添加回复

PHP中文网2017-04-11 10:40:56 2楼

了解了题主的意图，现在回答问题：

楼主想要通过某些输入控件，例如input等输入值，
span.total这里同步显示被输入的值，就像计算器键盘和显示器那样

这样的话，改变span.total颜色的源头就不是span.total是不是有值了，而是在你的输入控件的输入事件中做控制。例如：

input进行编辑（可以是输入可以是删除）
input的input事件中，处理：不管值为空与否，都同步值到span.total中去；如果当前input值不为空，设span#payBtn为颜色1，如果input值为空，设span#payBtn为颜色2

赞 +0

添加回复

黄舟2017-04-11 10:40:56 1楼

如果是css3的话选择器就可以支持了,要IE9才支持,如果不是,你还是要用js

p{background:#000;}/*不空*/
p:empty{height:25px;border:1px solid #ddd;background:#eee;} /*空*/

    <p>结构性伪类选择符 E:empty</p>
    <p><!--我是一个空节点p，请注意我与其它非空节点p的外观有什么不一样--></p>
    <p>结构性伪类选择符 E:empty</p>

测试地址:https://jsfiddle.net/qkcoqpt4

可以参考css3手册

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>