ajax 调用后重置 CSS 徽章内容

Question

我有一个包含一些导航选项卡的页面。如果该选项卡有通知，则会显示一个徽章。当标签处于焦点时，我希望AJAX调用进行服务器请求，并且如果响应成功，则希望徽章重置为零。我可以显示徽章并且ajax调用成功返回（我没有在下面的代码中包含这个）然后当我尝试为选项卡设置数据属性时，值不会改变。

相关代码如下：

<div class="container-fluid">
    <br/>
    <div class="col-sm-10">
        <div class="panel with-nav-tabs panel-tab-block">
            <div class="panel-heading">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a data-toggle="tab" class="" href="#projects-tab">Projects</a>
                    </li>
                    <li>
                        <a data-toggle="tab" id="forum-notification-badge" class="notification-badge" 
                        data-notification-badge="1" href="#forum-tab">Forum</a>
                    </li>
                </ul>
            </div>
            <div class="panel-body">
                <div class="tab-content">
                    <div id="projects-tab" class="tab-pane fade in active">
                        <div class="row">

                                <div class="col-sm-12">
                                    <div class="panel with-nav-tabs panel-tab-block">
                                        <h1>
                                            Projects
                                        </h1>

                                    </div>
                                </div>
                        </div>
                        <div class="row">
                            <div class="spacer-sml"></div>
                        </div>
                        <div class="row">
                            <div class="spacer-sml"></div>
                        </div>
                    </div>
                    <div id="forum-tab" class="tab-pane fade">
                        <div class="tab-block-content forum-posts">
                            <div class="">
                                <div class="col-sm-12">
                                    <h1>
                                        Forum
                                    </h1>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JQuery:

jQuery(document).ready(function( $ ) {

    $('#forum-notification-badge').on("focus", function() {
        var self = $(this);

        //Do ajax call if success reset the badge to zero
        self.data("notification-badge","0");
        console.log("set badge to zero");

    });

});

css:

.nav {
    border: 1px;
    border-color: #2f70b1;
}
.nav-bar {
    margin-bottom: 0px !important;
}
.navbar-default {
    background-color: #1d3c5c;
    border-color: #000000;
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    -webkit-transition: all 0.35s;
    -moz-transition: all 0.35s;
    transition: all 0.35s;
    margin-bottom: 0px !important;
    border-radius: 0px;
}

.navbar-default .navbar-header .navbar-brand {
    color: #777;
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}

.navbar-default .navbar-header .navbar-brand:hover, .navbar-default .navbar-header .navbar-brand:focus{
    color: #777;
}

.navbar-default .navbar-header .navbar-toggle {
    font-weight: 700;
    font-size: 12px;
    color: #222222;
    text-transform: uppercase;
}

.navbar-default .nav>li>a, .navbar-default .nav>li>a:focus {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    color: #222222;
}

.navbar-default .nav>li>a:hover, .navbar-default .nav>li>a:focus:hover {

}

.navbar-default .nav>li.active>a, .navbar-default .nav>li.active>a:focus{
    color: #F05F40 !important;
    background-color: transparent;
}

.navbar-default .nav>li.active>a:hover, .navbar-default .nav>li.active>a:focus:hover{
    background-color: #1d3c5c;
}

@media ( min-width : 768px) {
    .navbar-default {
        background-color: #1d3c5c;

    }
    .navbar-default .navbar-header .navbar-brand {
        color: #ddd;
    }
    .navbar-default .navbar-header .navbar-brand:hover, .navbar-default .navbar-header .navbar-brand:focus
        {
        color: white;
    }
    .navbar-default .nav>li>a, .navbar-default .nav>li>a:focus {
        color: #ddd;
    }
    .navbar-default .nav>li>a:hover, .navbar-default .nav>li>a:focus:hover {
        color: white;
    }
    .navbar-default.affix {
        background-color: white;

    }
    .navbar-default.affix .navbar-header .navbar-brand {
        color: #F05F40;
        font-size: 14px;
    }
    .navbar-default.affix .navbar-header .navbar-brand:hover,
        .navbar-default.affix .navbar-header .navbar-brand:focus {
        color: #eb3812;
    }
    .navbar-default.affix .nav>li>a, .navbar-default.affix .nav>li>a:focus {
        color: #222222;
    }
    .navbar-default.affix .nav>li>a:hover, .navbar-default.affix .nav>li>a:focus:hover
        {
        color: #F05F40;
    }
}

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    background-color: #286090;
}
.panel.with-nav-tabs.panel-tab-block{
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

.with-nav-tabs.panel-tab-block .nav-tabs > li > a,
.with-nav-tabs.panel-tab-block .nav-tabs > li > a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs > li > a:focus {
    color: #ffffff;
    background-color: #999999;
}
.with-nav-tabs.panel-tab-block .nav-tabs > .open > a,
.with-nav-tabs.panel-tab-block .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-tab-block .nav-tabs > li > a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs > li > a:focus {
    color: #fff;
    background-color: #666666 ;

}
.with-nav-tabs.panel-tab-block .nav-tabs > li.active > a,
.with-nav-tabs.panel-tab-block .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs > li.active > a:focus {
    color: #fff;
    background-color: #2f70b1;
    border-color: #2f70b1;
}
.with-nav-tabs.panel-tab-block .nav-tabs > li.dropdown .dropdown-menu {
    background-color: #428bca;
    border-color: #3071a9;
}
.with-nav-tabs.panel-tab-block .nav-tabs > li.dropdown .dropdown-menu > li > a {
    color: #fff;   
}
.with-nav-tabs.panel-tab-block .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
    background-color: #3071a9;
}
.with-nav-tabs.panel-tab-block .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-tab-block .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
    background-color: #4a9fe9;
}

.tab-block-content {
    color: #202020;
}



.notification-badge {
    position:relative;
    padding-right: 1em;
}

.notification-badge[data-notification-badge]:after {
   content:attr(data-notification-badge);
   position:absolute;
   top:-0.75em;
   right:-0.75em;
   font-size:0.75em;
   background:red;
   color:white;
   width:1.5em;
   height:1.5em;
   text-align:center;
   line-height:1.5em;
   border-radius:50%;
   box-shadow:0 0 1px #333;
}

我还创建了一个jsfiddle

Answer 1

请改用attr()。

$('#forum-notification-badge').on("focus", function() {
    var self = $(this);

    //Do ajax call if success reset the badge to zero
    self.attr("data-notification-badge",0);
    console.log("set badge to zero");

});

Answer 2

.data() 方法只更新 jQuery 存储的内部变量，而不是 HTML 本身，您需要改用 .attr() 方法。

代码片段演示：

jQuery(document).ready(function($) {

  $('#forum-notification-badge').on("focus", function() {
    var self = $(this);

    //Do ajax call if success reset the badge to zero
    self.attr("data-notification-badge", "0");
    console.log("set badge to zero");

  });


});

.nav {
  border: 1px;
  border-color: #2f70b1;
}

.nav-bar {
  margin-bottom: 0px !important;
}

.navbar-default {
  background-color: #1d3c5c;
  border-color: #000000;
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
  margin-bottom: 0px !important;
  border-radius: 0px;
}

.navbar-default .navbar-header .navbar-brand {
  color: #777;
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}

.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
  color: #777;
}

.navbar-default .navbar-header .navbar-toggle {
  font-weight: 700;
  font-size: 12px;
  color: #222222;
  text-transform: uppercase;
}

.navbar-default .nav>li>a,
.navbar-default .nav>li>a:focus {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 13px;
  color: #222222;
}

.navbar-default .nav>li>a:hover,
.navbar-default .nav>li>a:focus:hover {}

.navbar-default .nav>li.active>a,
.navbar-default .nav>li.active>a:focus {
  color: #F05F40 !important;
  background-color: transparent;
}

.navbar-default .nav>li.active>a:hover,
.navbar-default .nav>li.active>a:focus:hover {
  background-color: #1d3c5c;
}

@media ( min-width: 768px) {
  .navbar-default {
    background-color: #1d3c5c;
  }
  .navbar-default .navbar-header .navbar-brand {
    color: #ddd;
  }
  .navbar-default .navbar-header .navbar-brand:hover,
  .navbar-default .navbar-header .navbar-brand:focus {
    color: white;
  }
  .navbar-default .nav>li>a,
  .navbar-default .nav>li>a:focus {
    color: #ddd;
  }
  .navbar-default .nav>li>a:hover,
  .navbar-default .nav>li>a:focus:hover {
    color: white;
  }
  .navbar-default.affix {
    background-color: white;
  }
  .navbar-default.affix .navbar-header .navbar-brand {
    color: #F05F40;
    font-size: 14px;
  }
  .navbar-default.affix .navbar-header .navbar-brand:hover,
  .navbar-default.affix .navbar-header .navbar-brand:focus {
    color: #eb3812;
  }
  .navbar-default.affix .nav>li>a,
  .navbar-default.affix .nav>li>a:focus {
    color: #222222;
  }
  .navbar-default.affix .nav>li>a:hover,
  .navbar-default.affix .nav>li>a:focus:hover {
    color: #F05F40;
  }
}

.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
  background-color: #286090;
}

.panel.with-nav-tabs.panel-tab-block {
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}

.with-nav-tabs.panel-tab-block .nav-tabs>li>a,
.with-nav-tabs.panel-tab-block .nav-tabs>li>a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs>li>a:focus {
  color: #ffffff;
  background-color: #999999;
}

.with-nav-tabs.panel-tab-block .nav-tabs>.open>a,
.with-nav-tabs.panel-tab-block .nav-tabs>.open>a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs>.open>a:focus,
.with-nav-tabs.panel-tab-block .nav-tabs>li>a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs>li>a:focus {
  color: #fff;
  background-color: #666666;
}

.with-nav-tabs.panel-tab-block .nav-tabs>li.active>a,
.with-nav-tabs.panel-tab-block .nav-tabs>li.active>a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs>li.active>a:focus {
  color: #fff;
  background-color: #2f70b1;
  border-color: #2f70b1;
}

.with-nav-tabs.panel-tab-block .nav-tabs>li.dropdown .dropdown-menu {
  background-color: #428bca;
  border-color: #3071a9;
}

.with-nav-tabs.panel-tab-block .nav-tabs>li.dropdown .dropdown-menu>li>a {
  color: #fff;
}

.with-nav-tabs.panel-tab-block .nav-tabs>li.dropdown .dropdown-menu>li>a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs>li.dropdown .dropdown-menu>li>a:focus {
  background-color: #3071a9;
}

.with-nav-tabs.panel-tab-block .nav-tabs>li.dropdown .dropdown-menu>.active>a,
.with-nav-tabs.panel-tab-block .nav-tabs>li.dropdown .dropdown-menu>.active>a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs>li.dropdown .dropdown-menu>.active>a:focus {
  background-color: #4a9fe9;
}

.tab-block-content {
  color: #202020;
}

.notification-badge {
  position: relative;
  padding-right: 1em;
}

.notification-badge[data-notification-badge]:after {
  content: attr(data-notification-badge);
  position: absolute;
  top: -0.75em;
  right: -0.75em;
  font-size: 0.75em;
  background: red;
  color: white;
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  line-height: 1.5em;
  border-radius: 50%;
  box-shadow: 0 0 1px #333;
}

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <br/>
  <div class="col-sm-10">
    <div class="panel with-nav-tabs panel-tab-block">
      <div class="panel-heading">
        <ul class="nav nav-tabs">
          <li class="active">
            <a data-toggle="tab" class="" href="#projects-tab">Projects</a>
          </li>
          <li>
            <a data-toggle="tab" id="forum-notification-badge" class="notification-badge" data-notification-badge="1" href="#forum-tab">Forum</a>
          </li>
        </ul>
      </div>
      <div class="panel-body">
        <div class="tab-content">
          <div id="projects-tab" class="tab-pane fade in active">
            <div class="row">

              <div class="col-sm-12">
                <div class="panel with-nav-tabs panel-tab-block">
                  <h1>
                    Projects
                  </h1>

                </div>
              </div>


            </div>
            <div class="row">
              <div class="spacer-sml"></div>
            </div>
            <div class="row">
              <div class="spacer-sml"></div>
            </div>
          </div>
          <div id="forum-tab" class="tab-pane fade">
            <div class="tab-block-content forum-posts">
              <div class="">
                <div class="col-sm-12">
                  <h1>
                    Forum
                  </h1>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Updated JSFiddle