我希望能够使用 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>
最佳答案
.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>关于javascript - 使用 jquery 通过按钮控制选取框行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46674794/