Question

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

我已经看到javascript已经与on 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的OBSOLETE功能！浏览器将来可能会放弃支持。尽量避免使用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>

不要咬我，我只是试图帮助他使用随机颜色：）

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");

});

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

3 个答案: