Fatal编程技术网
  • javascript/
  • Javascript jQuery事件停止使用RxJS

Javascript jQuery事件停止使用RxJS

javascript jquery html rxjs

Javascript jQuery事件停止使用RxJS,javascript,jquery,html,rxjs,livescript,Javascript,Jquery,Html,Rxjs,Livescript,因此，基本上，我的问题是，在我的程序开始时，jQuery.css（）工作正常，测试如下： $("#canvas").css("border", "3px solid red"); 就在那之后，当我尝试添加一个div时，.css（）停止了对该元素的工作。像这样： var elem = $("<div/>", {"class": "circle"}); elem.css({'background-color': color}) .appendTo($("#circles"));

因此，基本上，我的问题是，在我的程序开始时，jQuery
.css（）
工作正常，测试如下：

$("#canvas").css("border", "3px solid red");
就在那之后，当我尝试添加一个div时，
.css（）
停止了对该元素的工作。像这样：

var elem = $("<div/>", {"class": "circle"});
elem.css({'background-color': color})
    .appendTo($("#circles"));
还有HTML：

<html>
    <head>
        <title>RxTest</title>
        <script type="text/javascript" src="libs/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="libs/rx.all.js"></script>
        <script type="text/javascript" src="js/rxtest.js"></script>

        <style>
            #canvas {
                position: relative;
                width: 640px; height: 360px; background: #000000;
                color: #FFFFFF;
                overflow: hidden;
            }

            .game-container {
                position: absolute;
                background: transparent;
                color: #FFFFFF;
            }

            .circle {
                position: absolute;
                border-radius: 50%;
                width: 30px;
                height: 30px;
            }
        </style>
    </head>
    <body>
        <div id="canvas">
            <div id="circles" class="game-container"></div>
            <div id="stats" class="game-container">
                <div id="hits"></div>
                <div id="missclicks"></div>
                <div id="misses"></div>
            </div>
        </div>
    </body>
</html>


RxTest
#帆布{
位置：相对位置；
宽度：640px；高度：360px；背景：000000；
颜色：#FFFFFF；
溢出：隐藏；
}
.游戏容器{
位置：绝对位置；
背景：透明；
颜色：#FFFFFF；
}
.圆圈{
位置：绝对位置；
边界半径：50%；
宽度：30px；
高度：30px；
}
尝试删除appendTo中的$（）并将“#圆圈”放在那里，

是JavaScript中的保留字（请参见：），使用它可能会停止脚本的进一步执行。有几种方法可以解决这个问题。例如，您可以使用
.addClass（）
方法设置类

尝试更改此选项：

var elem = $("<div/>", {class: "circle"});
elem.css({'background-color': color})
    .appendTo($("#circles"));

var elem=$（“”，{class:“circle”}）；
css（{'background-color'：color}）
.appendTo（$（“#圈”）；
为此：

var elem = $("<div/>").addClass("circle");
elem.css({'background-color': color})
    .appendTo($("#circles"));

var elem=$（“”）addClass（“圆”）；
css（{'background-color'：color}）
.appendTo（$（“#圈”）；
看看是否有帮助。

哦，所以，我走得太远了。显然，RxJS为每个订户创建了一个新的circle div。在本例中，为每个圈预订了4个事件。我通过使用
Rx.Observable.prototype.publish（）
解决了这个问题

工作小提琴：

检查这把小提琴@jQuery我知道它应该可以工作。但是在我的程序中，它只是添加了没有样式的空div。我想您需要指定div的宽度和高度吗？我认为css的问题不是jquery代码。签入控制台您将找到添加的div？请检查此项。它正在工作。可能是您没有得到正确的颜色代码？作为提示，
{x:x，y:y，color:color}
是
{x，y，color}
，这只是问题中的一个输入错误。另外需要注意的是：脚本工作得很好，不考虑渲染。@Sieg将您的示例放在上面，或者每个人都可以看到什么工作以及如何工作。在你的问题中提供有限的信息和在代码中输入错误肯定无助于诊断你的问题。发布实时代码示例可能会在一分钟内解决问题。 
var elem = $("<div/>").addClass("circle");
elem.css({'background-color': color})
    .appendTo($("#circles"));