如何为每个选取框设置不同的背景颜色？

Question

客户被要求在页面模板中使用，并且客户端询问是否可以更改每个侯爵的字幕颜色结束它以背景 xxx 开始选取框 3，

我见过 javascript 与 on with marquee 一起使用，但不是一个像样的例子，关于如何实现这样的任务的任何想法，这就是我目前所拥有的：

<marquee id="marquee1" onfinish="switch_marque();">Test Run 1</marquee>
<marquee id="marquee2" onfinish="switch_marque();">Test Run 2</marquee>
<marquee id="marquee3" onfinish="switch_marque();">Test Run 3</marquee>

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
   $( document ).ready(function() {
       function switch_marquee(){
           $(this).css("background-color","green"); 
       };
   )};
</script>

Answer 1

switch_marque() 函数不应在 $(document).ready() 中，因为它只会在选取框加载时调用。

在我继续之前：

Marquee 被认为是 HTML5 的过时功能！浏览器将来可能会放弃支持。尽量避免它并改用 CSS 解决方案！

(source)

<marquee id="marquee1" onfinish="switch_marque(1);">Test Run 1</marquee>
<marquee id="marquee2" onfinish="switch_marque(2);">Test Run 2</marquee>
<marquee id="marquee3" onfinish="switch_marque(3);">Test Run 3</marquee>

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">

    function switch_marquee(value){

       var nextMarquee = (value++)%3;
       $("#marquee" + nextMarquee).css("background-color","green"); 
    };
</script>

Answer 2

使用随机背景色示例扩展@Jordumus 的回答：

<marquee id="marquee1" onfinish="switch_marque(1);">Test Run 1</marquee>
<marquee id="marquee2" onfinish="switch_marque(2);">Test Run 2</marquee>
<marquee id="marquee3" onfinish="switch_marque(3);">Test Run 3</marquee>

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">

    function switch_marquee(value){

       var nextMarquee = (value++)%3;
       $("#marquee" + nextMarquee).css("background-color", getRandomColor()); 

    };

    // custom function to generate and return random color;
    function getRandomColor() {
       var letters = '0123456789ABCDEF'.split('');
       var color = '#';
       for (var i = 0; i < 6; i++ ) {
           color += letters[Math.floor(Math.random() * 16)];
       }
       return color;
    }

</script>

Don't bite me, I've just tried to help him using random colors :)

Answer 3

在你的函数中：

function switch_marquee(){
               $(this).css("background-color","green"); 
           };

this 引用 window 上下文，而不是 marquee 元素，您必须绑定函数以使用元素 marquee 作为上下文，您可以这样做这个：

<marquee id="marquee1" onfinish="switch_marque.bind(this); switch_marque()">Test Run 1</marquee>

或者，我宁愿这样做：

<marquee id="marquee1">Test Run 1</marquee>
<marquee id="marquee2">Test Run 2</marquee>
<marquee id="marquee3">Test Run 3</marquee>

$("marquee").on('finish', function(){

 $(this).css("backgroundColor","green");

});

如何为每个选取框设置不同的背景颜色？

How can I have a different background color for each marquee?

javascript

jquery

marquee