Question

我需要为我的应用创建通知计数器。现在，我想为每个按钮点击添加一个增加数字在图像上。如何使用jQuery实现这一目标？ JSfiddle

HTML：

<img id="header_bell_notificator" class="show_notif" src="http://www.gsi.co.ir/Docs/Images/Red_Circle.png" alt="" width="30px">
<button id="kick_button">click this</button>

CSS：

.show_notif{
    visibility: hidden;
}

JS：

var counter=0;
$( "#kick_button" ).click(function() {$("#header_bell_notificator").removeClass("show_notif");
    });

Answer 1

为您的实施提供一些mod ...

图片的包装div
在包装器上设置data-counter属性
使用:before伪元素

你可以得到这样的东西：

jsfiddle

＆＃13;

var counter=0,
    $bellNotificator = $('#header_bell_notificator'),
    $bellNotificatorImg = $bellNotificator.find('img');

$( "#kick_button" ).click(function() {
    counter++;
    $bellNotificator.attr('data-counter', counter);
    $bellNotificatorImg.removeClass("show_notif");
});

＆＃13;

body {
    font-family: helvetica,arial,sans-serif;
}
#header_bell_notificator {
    float:left;
    width: 30px;
    height: 30px;
    margin: 5px;
    position: relative;
}
#header_bell_notificator:before {
    content: attr(data-counter);
    position: absolute;
    line-height: 30px;
    width: 30px;
    text-align: center;
    color: #fff;
    font-size: .8em;
    font-weight: bold;
}

.show_notif{
    visibility: hidden;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="header_bell_notificator">
    <img class="show_notif" src="http://www.gsi.co.ir/Docs/Images/Red_Circle.png" alt="" width="30px" />
</div>
    
<button id="kick_button">click this</button>

＆＃13;

Answer 2

只需这样试试：

UPDATED FIDDLE

   $( "#kick_button" ).click(function() {
      var counter = parseInt($('.counter').html()) + 1;
      $('.counter').html(counter);
   });

并添加一个名为<div class="counter">0</div>

的容器

Answer 3

一种方法是将图像移动到a的背景，然后更改其内部html。像这样：

QGraphicsView

这里是updated fiddle

jQuery - 为每次点击添加越来越多的图像

3 个答案: