如何为每个选框使用不同的背景颜色

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

本文关键字：颜色 背景      更新时间：2023-09-26
我

被客户要求在页面模板中使用，并且客户询问是否可以更改每个选框的选框的背景颜色，因此当选框 1 结束其开始选框 2 但使用背景 xxx 时，当它结束时，它以背景 xxx 启动选框 3，

我已经看到javascript与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>

switch_marque() 函数不应位于$(document).ready()内，因为它仅在加载选框时调用。

在我继续之前：

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

（来源）

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

用随机背景颜色示例扩展@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>

别咬我，我只是想用随机颜色帮助他:)

在你的函数中：

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");
});
相关文章：