Question

我正在考虑在点击按钮时动态切换班级的方法，并在该按钮上添加标签，说明切换按钮的更改内容。看起来像这样的东西。

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

我想尽可能简单地在代码端添加这些按钮，所以我想简单地使用＆＃34; data＆＃34;类的属性和该按钮的标签。这样的事情。

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

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

2 个答案: