Question

我正在尝试使用这个优秀的jQuery文本滑块：http://codepen.io/mikedevelops/pen/eNjeJm

但我真的需要在同一页面上有两个滑块。我试图复制代码并更改第二个滑块中的变量名称以防止出现问题 - 但似乎无法使其工作。这是我的尝试，下面是jquery：http://codepen.io/hardanger/pen/NqmOom

要明确，我认为这是变量的问题。

// add as many adjectives as you like!
var adjs = ["very cool", "really exciting", " super awesome", "jQuery sliding"],
sentence = $('#sentence'),
adjList = $('#adjList'),
stop = false;

    // function to return the most up-to-date
    // version of our adjective list
    function getList() {
       return $('.adj');
    }

    // function to build the adjective list
    // args: adjective array
    function build(arr) {
       for (i=0; i<arr.length; i++) {
          var item = "<li class='adj'>";
          $(adjList).append(item + arr[i] + "</li>");
       }
    }

    // function to resize adjective list
    // args: adjective list item
    function resize(el) {
       $(adjList).animate({
          width: $(el).width(),
       }, 200);
    }

    // function to add slide-in transition
    // args: element that needs to slide
    function slideIn(el) {
       // duration slide is on screen
       var hold = 1000;
       // resize area to sliding element
       resize($(el));
       // add slide-in class
       $(el).addClass('slide-in');  
       // after 'hold' duration slide-out current item
       // then slide in next item
       setTimeout(function(){
          // check to see if loop should continue
          if (stop === true) {
             stop = false;
             return;
          }
          // slide current element out
          slideOut(el);
          // slide in next element in queue
          slideIn($(el).next());
}, hold);
    }

    // function to add slide-out transition
    // args: element that needs to slide
    function slideOut(el) {
// remove current class and add slide-out transition
$(el).removeClass('slide-in').addClass('slide-out');
// wait for slide tramsition to finish then
// call 'change' function
setTimeout(function(){
    change();
}, 200);
    }

    // function to re-arrange adjective list
    function change() { 
// store last item index
var i = adjs.length - 1;
// detach element that has slide-out class
// put to the bottom of the list after
// the last item
$('.adj:eq(' + i + ')').after($('.slide-out').detach());
// remove class to send element back to original position
$('.adj').removeClass('slide-out');
    }

    // build slider
    build(adjs);
    // init loop
    slideIn(getList()[0]);


    // second slider


    // add as many adjectives as you like!
    var adjs2 = ["test", "test", " testtesttesttesttesttest", "test"],
sentence2 = $('#sentence2'),
adjList2 = $('#adjList2'),
stop = false;

    // function to return the most up-to-date
    // version of our adjective list
    function getList2() {
return $('.adj2');
    }

    // function to build the adjective list
    // args: adjective array
    function build(arr2) {
for (i2=0; i2<arr2.length; i2++) {
    var item2 = "<li class='adj2'>";
    $(adjList2).append(item2 + arr2[i2] + "</li>");
}
    }

    // function to resize adjective list
    // args: adjective list item
    function resize(el2) {
$(adjList2).animate({
    width: $(el2).width(),
}, 200);
    }

    // function to add slide-in transition
    // args: element that needs to slide
    function slideIn2(el2) {
// duration slide is on screen
var hold2 = 1000;
// resize area to sliding element
resize($(el2));
// add slide-in class
$(el2).addClass('slide-in2');   
// after 'hold' duration slide-out current item
// then slide in next item
setTimeout(function(){
    // check to see if loop should continue
    if (stop === true) {
        stop = false;
        return;
    }
    // slide current element out
    slideOut2(el2);
    // slide in next element in queue
    slideIn2($(el2).next());
}, hold2);
    }

    // function to add slide-out transition
    // args: element that needs to slide
    function slideOut2(el2) {
// remove current class and add slide-out transition
$(el2).removeClass('slide-in2').addClass('slide-out2');
// wait for slide tramsition to finish then
// call 'change' function
setTimeout(function(){
    change();
}, 200);
    }

    // function to re-arrange adjective list
    function change() { 
// store last item index
var i2 = adjs2.length - 1;
// detach element that has slide-out class
// put to the bottom of the list after
// the last item
$('.adj2:eq(' + i2 + ')').after($('.slide-out2').detach());
// remove class to send element back to original position
$('.adj2').removeClass('slide-out2');
    }

    // build slider
    build(adjs2);
    // init loop
    slideIn2(getList2()[0]);

Answer 1

有许多方法可以封装代码。在这种情况下，一个好的模式是jQuery plugin。正确封装的关键是删除全局引用，以隔离代码并注入代码需要操作的任何内容。

全球参考可能很棘手，因为它们可以有多种形式。在这种情况下，您在问题中链接的原始代码包含对JavaScript中全局变量的引用（例如，adjs数组）和ID和类的特定DOM元素（例如$('#adjList')和{{ 1}}）。您必须小心使用类，因为当您按类选择时，您将获得所有页面上具有该类的元素。这是原始代码的问题，因为您只需要具有该类的元素的子集。

样式表也可能存在全局引用问题。在原始代码中，样式表使用ID来设置元素的样式，这意味着页面上只能有一个元素。您真的想要使用可以应用于多个元素的类。

JavaScript代码真正需要知道的最基本的东西是将交换文本的DOM元素（$('.slide-out')），以及要交换的文本列表。为此调用jQuery插件看起来像这样：

<ul id="adjList">

我在原始代码中制作了一个有点被黑的但功能强大的jQuery插件：

http://codepen.io/anon/pen/JdVVje

主要更改是将相应的代码包装为插件，修复样式表中的ID引用，并修复JavaScript代码中的样式引用。如您所见，页面上有两个工作文本滑块。

简单的jQuery变量问题 - 冲突的变量

1 个答案: