代码之家 › 专栏 › 技术社区 › Kiran Shahi Jonny

JQuery addClass在单击事件时不处理锚标记

singleton css html jquery javascript

Kiran Shahi Jonny · 技术社区 · 7 年前

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;

.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;
}

<div class="pagination">
    <ul id="pagination">
    </ul>
</div>

加载时一切正常,但我需要更改最近单击的锚标记的背景。

3 回复 | 直到 7 年前

Shiladitya 7 年前

给你一个解决方案 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>

Neeraj Pathak 7 年前

     $('ul#pagination li a').on('click', function () {
                                $("ul#pagination li a.clickedLink").removeClass("clickedLink");
                                $(this).addClass('clickedLink');
                            });

.clickedLink{
color:red
}

<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>

cypark 7 年前

试试下面,看看它是否有效。

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');
                });
            },