jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了如何改进这个jQuery切换方法大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试学习 jquery,我有一些基本的 javascript.

我已经编写了这段代码在3函数之间切换,它运行正常

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
</head>

<style type="text/css">
    .format1{
        BACkground: red;
    }
    .format2{
        BACkground: yellow;
    }
    .format3{
        BACkground: blue;
    }
</style>

<div id="div-toggle">Click here to toggle</div>

<script language="javascript">
    var click = 0;
    $('#div-toggle').toggle(
        function(){
            var el = $('#div-toggle');
            el.addClass('format1');

            el.html('No. of clicks: ' + click++);
        },function(){
            var el = $('#div-toggle');
            el.removeClass('format1');
            el.addClass('format2');

            el.html('No. of clicks: ' + click++);
        },function(){
            var el = $('#div-toggle');
            el.removeClass('format2');
            el.addClass('format3');

            el.html('No. of clicks: ' + click++);
        }
    );
</script>
</html>

在这里,如果您看到切换中所有功能内容相似.如何通过将这些代码移动到单个函数来改进这一点?

解决方法

编写一个函数生成回调:

var click = 0; // keep track of how many times user has clicked

// Generates an event handler that will remove oldClass,add newClass,increment 
// click,and update the element text whenever it is called.
function ClassSwapper(oldClass,newClass)
{
  return function()
  {
    $(this)
      .removeClass(oldClass)
      .addClass(newClass)
      .html('No. of clicks: ' + ++click);

  };
}

// generate three event handlers for toggle,such that the three
// format classes are cycled.
$('#div-toggle').toggle(
  ClassSwapper('format3','format1'),ClassSwapper('format1','format2'),ClassSwapper('format2','format3')
  );

请注意,toggle()将处理程序从最后一个返回到第一个,因此您可能希望第一个处理程序删除最后一个添加的类…

由于你要保留一个计数器,你可以完全避免切换(),并组合计数器,循环遍历的类列表,以及click事件处理程序:

// number of times user has clicked,and also index of *next* class to use
var click = 0; 
$("#div-toggle").click(function()
{
  // classes to cycle through
  var classes = ['format1','format2','format3'];

  // removes prevIoUs class,adds new one.
  // note that,for brevity,this takes advantage of
  // a detail specific to JavaScript arrays: negative indexes are 
  // interpreted as property names,so the first time this is called,// removeClass() will be passed the value of classes["-1"] (which will
  // return undefined) and will as a result do nothing.
  $(this)
    .removeClass(classes[(click-1)%classes.length])
    .addClass(classes[(click)%classes.length])
    .html('No. of clicks: ' + ++click);
});

大佬总结

以上是大佬教程为你收集整理的如何改进这个jQuery切换方法全部内容,希望文章能够帮你解决如何改进这个jQuery切换方法所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。