Question

我的HTML中有以下Material Design Lite switch，正在寻找一些javascript帮助。

{Extra:{State:closed Count:64 Reason:{Reason:conn-refused Count:64}}
    PortProp:{Protocol:tcp Port:22 StateStuff:{State:open Reason:syn-ack}}}

点击开关后，我想添加：

切换功能以将已检查的内容更新为未选中状态 - 例如on和off开关，但此处正在寻找JavaScript帮助。
我想真正拥有＆＃34;订阅的价值＆＃34;和＆＃34;取消订阅＆＃34;作为显示在其旁边的文本（但在html中硬编码）。动态改变是否可行？

感谢您的时间。我找到了这个as a reference，但它使用的是CheckBox。

Answer 1

如果您参考mdl的source code，您会发现check和uncheck函数与label标签绑定。

您可以指定ID来标记如下：

package
{
    import spark.components.Label;
    import spark.components.TextArea;
    import spark.core.SpriteVisualElement;
    import spark.components.View;

    public class UIHelper extends View
    {               
        private static var _instance:UIHelper = new UIHelper();

        private var _logText:TextArea;
        private var _convLabel:Label;
        private var _farVideoCarrier:SpriteVisualElement;
        private var _myVideoCarrier:SpriteVisualElement;

        public function UIHelper()
        {
            if(_instance !=null)
            {
                throw new Error("Singleton can only be accessed through Db.Instance");                  
            }
            logText = new TextArea;
            farVideoCarrier = new SpriteVisualElement;
            farVideoCarrier.width=300;
            farVideoCarrier.height=300;
            myVideoCarrier = new SpriteVisualElement;
            convLabel = new Label;
        }

        public function get convLabel():Label
        {
            return _convLabel;
        }

        public function set convLabel(value:Label):void
        {
            _convLabel = value;
        }

        public function get myVideoCarrier():SpriteVisualElement
        {
            return _myVideoCarrier;
        }

        public function set myVideoCarrier(value:SpriteVisualElement):void
        {
            _myVideoCarrier = value;
        }

        public function get farVideoCarrier():SpriteVisualElement
        {
            return _farVideoCarrier;
        }

        public function set farVideoCarrier(value:SpriteVisualElement):void
        {
            _farVideoCarrier = value;
        }

        public function get logText():TextArea
        {
            return _logText;
        }

        public function set logText(value:TextArea):void
        {
            _logText = value;
        }

        public static function get Instance():UIHelper
        {           
            return _instance;
        }
        //---------------------------------END---------------------------------
    }
}

MDL本身支持按钮单击时的开/关状态切换。您还可以通过其他按钮控制状态。

<label id="check" class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
    <input type="checkbox" id="switch-1" class="mdl-switch__input"/>
    <span class="mdl-switch__label">Subscribed</span>
</label>
<input type="button" value="test switch" id="btn"/>

要动态更新开关标签，可以像下面这样放置代码。在页面加载时绑定输入的更改事件，并在开/关状态更改时更新标签文本。

$("#btn").click(function() {
    if($('#check').is('.is-checked')) {
        $('#check')[0].MaterialSwitch.off();
    }
    else {
        $('#check')[0].MaterialSwitch.on();
    }
});

这是jsFiddle code。答案有点晚了，但我希望它仍然有帮助。

Answer 2

请参考下面的代码

   var myCheckbox = document.getElementById("id");
   myCheckbox.parentElement.MaterialSwitch.on();

Answer 3

下面的代码可能会解决您的问题：

var isChecked = $('#switch-1').is(':checked');
if(isChecked) {
    alert("subscribed");
} else {
    alert("not subscribed");
}

用于切换Material Design Lite Switch的JavaScript

3 个答案: