javascript - 只要点击某个marquee文字滚动区，同样的类名为".marquee"文字滚动区就会一起滚动。

Question

应该怎么解决呢？

var btn = $("<a class='btn btn_left' href='javascript:void(0)' >&lt;</a><a class='btn btn_right' href='javascript:void(0)' >&gt;</a>");
$(".marquee").append($btn);
 (function($){
        $.fn.textRoll = function(option){
            var opt = $.extend({},option);  
            return this.each(function(){
                //参数初始化
                var _btnLeft = $(opt.Left);
                var _btnRight = $(opt.Right);
                var _this = $(this).find('ul');
                var origin = _this.position().left;
                var move= origin;
                var t;
                var speed=opt.speed?parseInt(opt.speed,1000):50;
                var textLeft = function(){
                    t = setInterval(function(){
                        move++;
                        move>=origin?move = origin:_this.css({left:move});
                    },20);
                }
                var textRight = function(){
                    t = setInterval(function(){
                        move--;
                        _this.css({left:move});
                    },20);
                }
                var textStop = function(){
                    clearInterval(t);
                }
                _btnLeft.mousedown(textLeft).mouseup(textStop);
                _btnRight.mousedown(textRight).mouseup(textStop);
            })
        }
    })(jQuery);
    $(".marquee").textRoll({Left:'.btn_left',Right:'.btn_right'});

<p class="marquee">
    <ul><li>内容</li><li>内容</li><li>内容</li><li>内容</li><li>内容</li><li>内容</li></ul>
</p>
<p class="marquee">
    <ul><li>内容</li><li>内容</li><li>内容</li><li>内容</li><li>内容</li><li>内容</li></ul>
</p>
<p class="marquee">
    <ul><li>内容</li><li>内容</li><li>内容</li><li>内容</li><li>内容</li><li>内容</li></ul>
</p>
<p class="marquee">
    <ul><li>内容</li><li>内容</li><li>内容</li><li>内容</li><li>内容</li><li>内容</li></ul>
</p>

Answer 1

因爲你的代碼當中並沒有任何區分不同的 .marquee 機制，所以按照缺省行爲，所有 .marquee 都會被應用相應地操作。

只需將操作轉而應用到觸發事件的特定元素上即可。