问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
阿单
    13631120

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

    这个span不为空的时候图片描述
    这个span变色图片描述

    htmljavascripthtml5sublime-text
    阅读 15.1k
    6 个回答
    得票最新
    头像
    边城
      59.8k157274
      ✓ 已被采纳

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

      https://jsfiddle.net/xan4h58e/

      头像
      枫s的思念
        2.4k102639
        $(function(){
    var $span=$('span');
    $span.on('click',function(){
        if($(this).html()!==''){
            alert(1);
            $(this).html('');
        }else{
            alert(2);
            $(this).html('1111');
        }
    });
});

        是这意思么？

        头像
        shoestrong
          12811623

          参考下面：

          <!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>
          头像
          Hoyt
            6891181106

            判断标签内容是否为空

            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');
            头像
            外籍杰克
              8.8k32230

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

              1. 楼主想要通过某些输入控件，例如input等输入值，

              2. span.total这里同步显示被输入的值，就像计算器键盘和显示器那样

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

              1. input进行编辑（可以是输入可以是删除）

              2. input的input事件中，处理：不管值为空与否，都同步值到span.total中去；如果当前input值不为空，设span#payBtn为颜色1，如果input值为空，设span#payBtn为颜色2

              头像
              黑色技术
                17711017

                如果是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手册

                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                推荐问题