动态 class 切换开关和标签

Question

我正在考虑如何在单击按钮时动态切换 class on/off，并向该按钮添加一个标签来解释切换按钮将发生的变化。看起来像这样的东西。

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

我想尽可能简单地在代码端添加这些按钮，所以我想简单地为 class 和该按钮的标签使用 "data" 属性。像这样。

 /* 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>

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

Answer 1

这里是也适用于切换多个按钮的解决方案 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");
        }
    });
});

演示 fiddle

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

注释已添加 jquery 和 bootstrap

Answer 2

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/

动态 class 切换开关和标签

Dynamic class toggle with switch and label

jquery

class

switch-statement

toggle