www.ys3399.comjavascript点击一次添加一条信息,最多可添加五条,达到五条后,删除部分信息,就不能再添加了?

2016/12 01 14:12
此文章不得转载,如有需要请联系网站管理员。

一度的温暖,一百度的爱情,来自于www.ys3399.com的点点滴滴

添加完五条信息,再删除部分,就不克不及再添加了?求处理办法;
想要抵达的结果

  • 点击按扭添加一条信息;

  • 点击删除按钮,删除该信息;

  • 最多添加五条信息;


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>添加到一定数量后函数消失</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style>
    span{
        background: red;
        padding:2px 4px;;
        color:#fff;
        font-size: 14px;
    }
    li{
        padding:6px 0;
    }

</style>
<script>
$document.readyfunction {
      var num=0;
    $".btn".clickfunction aa{
        // console.log"123";
        num=num+1;
        var $val="<li>新增"+num+"条 <span>X</span></li>";
        $"ul".append$val;
         var $size=$"li".size;

         $"span".clickfunction bb{
            $this.parent.remove;
            $size=$size-1;
         }

        if$size==5{
            console.log"OK";
             $".btn".unbindclick,aa;
         }
    };
};

</script>
<style type="text/css">

</style>
</head>
<body>
<p>最多能添加五条信息,点击封闭可以删除该条信息</p>
<button class="btn">添加元素</button>
<ul>
</ul>
</body>
</html>

删除了不克不及再添加是由于你添加到5之后unbind了事变,就一定没了click事变了。并且事变里面绑事变的写法不太好哦,写个委托看起来更明晰。多余的变量能不要则不要。
如许写可以好一点:

$document.readyfunction { 
    $".btn".clickfunction aa{
      var $size=$"li".size;
      if$size < 5{
          var $val="<li>新增"+ $size + 1 +"条 <span>X</span></li>";
          $"ul".append$val;
       }
    };

    $"ul".onclick, span, function bb{    
      $this.parent.remove;      
    };   
};

不克不及添加的缘由是由于你unbind 了事变

精确的处理办法应该是设置一个计数器变量 num = 0

每添加了一条音讯 num++

然后每次添加音讯前写一个 if

if num <= 5 { // 实行添加 } else {return}

赞同楼上的答复,真实不要用unbind是最合适的办法,给一个计数器,index++,然后判别index的值能否大于某一个值,然后去做差别的处理

(看完/读完)这篇文章有何感想! 来看看www.ys3399.com是怎么评论的吧!

--转载请注明: ys3399盈丰国际官网_www.ys3399.com_ys3399盈丰国际官网网址 » www.ys3399.comjavascript点击一次添加一条信息,最多可添加五条,达到五条后,删除部分信息,就不能再添加了?

发表评论

(必填)