使用 jquery 控制按钮的选取框行为

Question

我希望能够使用 jQuery.

控制按钮的选取框行为

例如，我创建了以下按钮，当我点击它们时：

1) Start (class=btnStart) => the marquee starts
2) Stop (class=btnStop) => the marquee stops
3) Back (class=btnBack) => the marquee move backward
4) Right (class=btnRight) => the marquee moves to right
5) Fast (class=btnFast) => the marquee moves faster
6) Slow (class=btnSlow) => the marquee moves slower

<body>
  <div>
      <marquee>Lots of contents here, scrolling right to left by default</marquee>
  </div>
  <div>
    <button class="btnStart">Start</button>
    <button class="btnStop">Stop</button>\
  </div>
 <script>
    $(function (){

       $(".btnStop").click(function (){
          $("marquee").stop();// it does not work
        });

        $(".btnFast").click(function (){
            $("marquee").attr("scrollamount","5"); // doesnt change speed
         });
     });
 </script>
</body>

Answer 1

.start() 和 .stop() 方法仅适用于 javascript 对象。

$('marquee') returns 一个 jquery 对象，但您可以使用索引获取 DOM 元素。

$('marquee')[0] returns 您选择的 HTML 元素。

您可以使用 $('marquee')[0].start() 或 document.getElementById('marquee').start()。

let marquee=document.getElementById('marquee');
$('#btnRight').click(function(){
    marquee.setAttribute('direction','right');
    marquee.start();
});
$('#btnLeft').click(function(){
   marquee.setAttribute('direction','left');
   marquee.start();
});
$('#btnStop').click(function(){
   marquee.stop();
});
$('#btnStart').click(function(){
   marquee.start();
});
$('#btnFast').click(function(){
  marquee.setAttribute('scrollamount',30);
  marquee.start();
});
$('#btnSlow').click(function(){
  marquee.setAttribute('scrollamount',2);
  marquee.start();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<marquee id="marquee" behavior="scroll" scrollamount="10">Hello</marquee>
<button id="btnRight">Right</button>
<button id="btnLeft">Left</button>
<button id="btnStart">Start</button>
<button id="btnStop">Stop</button>
<button id="btnFast">Fast</button>
<button id="btnSlow">Slow</button>

使用 jquery 控制按钮的选取框行为

Control marquee behavior with buttons using jquery

html

javascript

jquery

marquee

jquery-animate