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')返回一个jquery对象，但您可以使用索引获取 DOM 元素。

$('marquee')[0]会返回您选择的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使用按钮控制选取框行为

1 个答案: