Question

我仍然是js的新手，也许这个问题非常简单，但我还是需要帮助。这是一个来自w3c的工作js示例，我试图在我的简单站点中实现。我想把它从普通的js变成jQuery语法，主要是出于教育目的，但是有一些问题要做。我想问的另一件事是为什么[0]给出了w3c例子中的可变电流（即点击数字）？我没有抓住逻辑。谢谢！

首先是js中的代码：

var btnContainer =  document.getElementById("pages");
var btns = btnContainer.getElementsByClassName("numb");
  for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";    
});

在jquery中......显然有错误:(：

var btnContainer = $('#pages');
var btns = $('.numb');
for (var i = 0; i < btns.length; i++) {
    $(btns[i]).on('click', function() {
      var current = $('.active');
      current[0].className = current[0].className.replace(" active", "");
      this.className += 'active';   
    });
}

Answer 1

您已经存储了

上按钮的参考

var btns = $（＆＃39; .numb＆＃39;）;

所以当你添加＆＃39; onClick＆＃39;函数，只需调用变量，如下所示：

btns [i] .on（＆＃39;点击＆＃39;，function（）{ ... }

Answer 2

// var btnContainer = $('#pages');
// var btns = $('.numb');
$('#pages').on('click', '.numb', function(){
    console.log( this ); // you will get the current element here
    // write your code herer
});

Answer 3

在纯jQuery中执行此操作的正确方法是：

// Select all the elements which are children of `#pages` and have class `numb` assigned
$('#pages .numb')
  // Bind click event handler on all of the selected elements
  .click(function() {
    // Remove the class `active` from the element(s) which have this class assigned
    $('.active').removeClass('active');
    // Assign the class `active` to the clicked `.numb` element
    $(this).addClass('active');
});

Answer 4

试试这个：

var btnContainer = $('#pages');
var btns = $('.numb');
    btns.on('click', function() {
        $('.active').removeClass('active'); // OR
        btns.removeClass('active') // removes active class from all btns 
        $(this).addClass('active');
    }

Answer 5

我认为你在这个问题上把自己转化为jQuery做得很好。我还没有尝试过，因为我正处于其他事情的中间，但是从粗略的阅读或两个，它看起来很好。你不需要任何其他东西。 jQuery只是一组允许轻松访问文档（对象模型）的函数。

变量current被编入索引为current[0]的原因是current代表所有具有类名active 的元素，因为可能有多个这样的元素，选择器var current = $('.active');返回一个元素数组（实际上是jQuery对象，但这是一个实现细节）。

然后，您的代码只尝试对第一个具有类名active的元素执行某些操作。可能是因为作者知道只有一个这样的元素，或者他真的只想影响第一个这样的元素。

Answer 6

你可以使用jquery的.each函数来实现这个

示例： - btns.each（function（）{ }）每个元素都可以使用$（this）来访问大括号内。

Answer 7

$('#pages').on('click', '.numb', function(){
	$('#pages .numb').removeClass('active');
	$(this).addClass('active');
});

#pages li{
   width: 20px;
   height: 20px;
   list-style: none;
   text-align: center;
}
.active{
   line-height: 20px;
   background: blue;
   color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="pages">
     <li class="numb">1</li>
     <li class="numb active">2</li>
     <li class="numb">3</li>
     <li class="numb">4</li>
     <li class="numb">5</li>
</ul>

如何用jQuery语法编写这段代码？

7 个答案: