使用jquery控制按鈕行爲使用按鈕

我希望能夠使用jQuery控制按鈕的按鈕行爲。使用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>

來源

2017-10-10 Ngun Za Meme

請告訴我們你已經嘗試了什麼。 –

我剛剛加了我到目前爲止所嘗試過的。說實話，我不知道我在做什麼。 –

.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>

來源

2017-10-10 20:20:43

使用jquery控制按鈕行爲使用按鈕

回答

相關問題