带开关和标签的动态类切换

Question

我正在考虑如何在按钮单击时动态切换类的开/关，并向该按钮添加一个标签，解释切换按钮将改变什么。看起来像这样的东西。

                _________
Power          | ON/OFF  |
                _________
Lights         | ON/OFF  |

我想让在代码端添加这些按钮尽可能简单，所以我想简单地使用类的“数据”属性和该按钮的标签。像这样。

 /* Class Toggled Attr */         /* Switch label */
<div data-toggle-class="lights-on-off" data-toggle-label="Lights">

</div>

因此，使用 jQuery 应该很容易获得标签 attr 和 class attr 并将其与开关、标签和切换开关一起相应地添加到 DOM 中。为了使这更容易理解，这是一种有助于更好理解的非工作方式。

                       /*label*/  /*class*/
<div data-toggle-witch="Lights lights-on-off">

</div>

上面的方法使用标签分隔符选择器获取每个标签和类，同时仍然在一个属性值中，尽管使用这种方法我不能添加多个切换开关，因为它在一个元素上无效 2 个相同的属性。关于我应该如何做到这一点的任何想法？

Answer 1

HTML

<input type= "text" id="tbox" />
<input type="button" class="btn btn-danger" id="btn" value="add buttons" />

    <div id="container"></div>

CSS

.active{background:#0f0!important;}
    button.btn{margin:10px}
.ui-input-text.ui-body-inherit.ui-corner-all.ui-shadow-inset {
width: 50%;
float: left;
}
input#btn {
margin: 6px;
}
div#container {
width: 100%;
float: left;
}

JQUERY

$('#btn').on('click',function(){
    if( $('#tbox').val()!=""){
var tboxValue=$('#tbox').val();
 var btn = $('<button type="button"  class="btn" data-value="'+tboxValue+'">'+tboxValue+' OFF</button>');
$(btn).appendTo('#container');
  $('#tbox').val('');
    }
})




$("#container").on('click','.btn',function(){
  var innerHtml=$(this).attr('data-value');
    if($(this).hasClass('active')){ 
     $(this).html(innerHtml+" OFF");
     $(this).removeClass('active');
    } else{
    $(this).html(innerHtml+" ON");
    $(this).addClass('active');

    }

});

试试这个演示它有动态按钮和开关功能

http://jsfiddle.net/nadeemmnn2007/oer4L8s2/

Answer 2

这里也适用于切换多个按钮的解决方案 HTML

 <button type="button" class="btn" data-value="power">power OFF</button>
 <button type="button" class="btn" data-value="light">light OFF</button>

CSS

.active{background:#0f0!important}

JQUERY

var items= $('.btn');

$.each(items,function(i,v){ 
    $(v).on("click",function(){
    var innerHtml=$(this).attr('data-value');
    if($(this).hasClass('active')){ 
         $(this).removeClass('active');
         $(this).html(innerHtml+" OFF");
    } else{
         $(this).toggleClass('active');
         $(this).html(innerHtml+" ON");
        }
    });
});

演示小提琴

http://jsfiddle.net/nadeemmnn2007/td935pum/4/

注意添加jquery和bootstrap