phpstudy集成环境

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

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

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

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

参考下面：

<!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>

判断标签内容是否为空

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');

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

https://jsfiddle.net/xan4h58e/

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

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

是这意思么？

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

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

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

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

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

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

【热门文章】
【热门文章】