1

嗨，我正在尝试做一些简单的事情（请考虑到我是 Marionette + CSS + jquery 的新手）。我想要做的是：我必须有 2 个 div，当页面加载时，它们有一些特定的类样式（非活动样式红色），当用户点击其中一个时，我删除了“非活动”类和插入“活动”类样式，绿色。我正在使用Marionnette CompositeView 来渲染我的元素，问题是删除了“非活动”类但未添加活动类，我将问题简化为：

<script id="ulTemplate" type="text/template">
    <ul class="ulItem">
    </ul>
</script>
<script id="internal-Item" type="text/template">    
    <div class="<%= className %>"></div>
</script>    
<div class="container">
</div>

我的 JS/CSS/代码 我为父元素设置背景的原因（添加了额外的 div CompositeView）是因为我的 div 的最终结果应该有一个图像。这是一个非常简单的例子，最终它将成为一个更复杂的元素，但现在我坚持第一步（我认为更简单的一步）。请在这里帮助我，我对你的评论很仁慈，在这些领域又是新的。

4

1 回答 1

0

实际上，您的代码正在运行并且正在更改类，但问题是您在 addClasstoParentElement 函数中将类从“internal-Item-inactive”更改为“switcher-item-background-active”。并且该类不是您作为参数传递的类，也没有在您的 css 中定义。

在该功能中进行此更改就成功了。

       addClasstoParentElement: function (options) {
           if (!options.element.parent().hasClass(options.className)) {
                options.element.parent().addClass(options.className); // "internal-Item-active"
           }

请检查此链接 http://jsfiddle.net/xbBEy/64/

我添加了代码和解释。

        this.removeClassfromParentElement({element:this.ui.div1, className: "internal-Item-inactive"});
            this.addClasstoParentElement({element: this.ui.div1, className: "internal-Item-active"}); 
            // and here we make the second div Inactive, 
            // this referst to this specific Itemview that indeed contains div1 but does not contains div2 so you cannot use   
           // this.ui.div2 as it will be undefined. thats why is find it using    $('.did2') its  that is traversing the entire dom to find it.
    this.removeClassfromParentElement({element:$('.div2').closest('div'), className: "internal-Item-active"});
            this.addClasstoParentElement({element: $('.div2').closest('div'), className: "internal-Item-inactive"});
于 2013-05-24T15:15:15.907 回答