JQuery addClass在click事件上不能处理锚标记

时间:2017-08-03 04:00:29

标签: javascript jquery html css singleton

View view = layoutInflater.inflate(R.layout.listadapter, parent, false); 没有在点击事件上使用jQuery。我的代码看起来像这样。



addClass()

init: function () {
      ShareData.config.pageNo = 1;
      ShareData.ajaxCall();
      $(document).on('click', 'ul#pagination li a', function () {
          ShareData.config.pageNo = $(this).text();
          ShareData.ajaxCall();
          $("ul#pagination li a.clickedLink").removeClass("clickedLink");
          $(this).addClass('clickedLink');
      });
  },
  
var pageLink = "";
for (var i = 1; i <= totalPage; i++) {
    if (i == 1) {
        pageLink += "<li><a href='#' class='clickedLink'>" + i + "</a></li>";
    } else {
        pageLink += "<li><a href='#' class=''>" + i + "</a></li>";
    }
}
document.getElementById('pagination').innerHTML = pageLink;
&#13;
.pagination ul li a.clickedLink {
    background-color: #BBB;
}

.pagination ul li a{
    color: #000;
    height: 24px;
    line-height: 24px;
    width: 24px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    border: 1px solid #000;
    background: #FFF;
    text-shadow: none;
}
.pagination ul li {
    float: left;
}
&#13;
&#13;
&#13;

输出就像这样

html table with pagination 在加载时一切正常,我需要更改最近点击的锚标记的背景。

3 个答案:

答案 0 :(得分:2)

您可以使用解决方案https://jsfiddle.net/dk5n4695/2/

$('a').click(function(){
  $('a[class="clickedLink"]').removeClass('clickedLink');
  $(this).addClass('clickedLink');
});
.clickedLink {
    background-color: #BBB;
}

ul li a{
    color: #000;
    height: 24px;
    line-height: 24px;
    width: 24px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    border: 1px solid #000;
    background: #FFF;
    text-shadow: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
</ul>

答案 1 :(得分:2)

&#13;
&#13;
     $('ul#pagination li a').on('click', function () {
                                $("ul#pagination li a.clickedLink").removeClass("clickedLink");
                                $(this).addClass('clickedLink');
                            });
&#13;
.clickedLink{
color:red
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pagination">
    <ul id="pagination">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    </ul>
</div>
&#13;
&#13;
&#13;

答案 2 :(得分:1)

请尝试以下操作,看看是否有效。

init: function () {
                ShareData.config.pageNo = 1;
                ShareData.ajaxCall();
                $(document).on('click', 'ul.pagination li a', function () {
                    ShareData.config.pageNo = $(this).text();
                    ShareData.ajaxCall();
                    $("ul.pagination li a.clickedLink").removeClass("clickedLink");
                    $(this).addClass('clickedLink');
                });
            },