0
2つのデータ値を更新する必要があります。 クラス.messageconvでdivをクリックすると、data-unread_mess_nの値を取得し、それをdata-menutop_mess_nrと同じdata-unread_mess_nから引きます。
data-menutop_mess_nrの値が== 0の場合、クラスが変更されます。
データunread_mess_nとdata-menutop_messの値を更新できません。なぜですか?jqueryでデータ値を更新
$(document).on('click touchstart', '.messageconv', function(e) {
\t \t e.preventDefault();
\t \t messagesNumber($(this));
\t });
function messagesNumber(elem) {
\t \t var numMess = elem.parent().data('unread_mess_n');
\t \t var numMessMenutop = $('#menutop_mess_nr').data('menutop_mess_nr');
\t \t if (numMess != 0) {
\t \t \t elem.children('p').remove();
\t \t }
\t \t var remainingMess = numMessMenutop - numMess;
\t \t $('#menutop_mess_nr').html(remainingMess);
\t \t if (remainingMess == 0) {
\t \t \t $('#menutop_mess_nr').addClass('bluecount').removeClass('redcount');
\t \t }
\t \t elem.parent().data('unread_mess_n','0');
\t \t $('#menutop_mess_nr').data('menutop_mess_nr',remainingMess);
\t \t
\t }
.messageconv{
border: 2px solid red;
height: 50px;
}
.redcount {
background: #de2424;
width:30px;
}
.bluecount {
background: #333399;
width:30px;
}
.redcount:hover {
background: #ed4747;
text-decoration: none;
}
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<a data-unread_mess_n="2" href="5">
<div class="messageconv">
test
<p class="incmessage redcount">2</p></div>
</a>
<a data-unread_mess_n="3" href="4">
<div class="messageconv">
test1
<p class="incmessage redcount">3</p></div>
</a>
<p data-menutop_mess_nr="5" id="menutop_mess_nr" class="incmessage redcount">5</p>
使用を試すことができます '$( '#のmenutop_mess_nr')のattr( 'データ-menutop_mess_nr'、remainingMess);' – guradio
@guradio 10非常に私のコードはここでは奇妙なことがわかります。 $( '#menutop_mess_nr')を追加すると、attr( 'data-menutop_mess_nr'、remainingM ess);私の完全なコードでクラッシュする –