Question

我一直在努力尝试将切换按钮添加到用户生成的输入中。这是一个字体真棒切换按钮。

这是我的笔：http://codepen.io/lucky500/pen/bdpzbd和代码。

        <div id="list" class="greatList clearfix" >
        <ul class="greatList" style='display: none;'>
            <li class="items">
                <div class="box">
                    <i class="fa fa-toggle-on fa-2x active" id="on"></i>
                    <i class="fa fa-toggle-on fa-2x fa-rotate-180 inactive" id="off" style='display: none;'></i>
                </div>

            </li>
        </ul>   
    </div>

Jquery的

$(document).ready(function(){

    //toggler

    $('.box').click(function() {
        $('.inactive, .active').toggle();
    });


    var trash = '<span class="delete">X</span>';
    var toggleButton = '<div class="box"></div>';


    //To allow the user to use enter
$('#addButton').click(function(e){
    e.preventDefault();
    var item = $('#addItems').val();
    var placeIt = $('<li style="display: block;">' + toggleButton + item +  trash + '</li>');

    if(!$.trim($('#addItems').val())) {
        alert('Please enter text to add to the list');
    } else {
        $('.greatList').append(placeIt);

    };
})

//To remove li when .trash is clicked
$(document).on('click', '.delete', function() {
    $(this).closest('li').fadeOut(350);
});

}）;

所有的帮助表示赞赏！

Answer 1

我实际上只需要在我的toggleButton var中使用我的切换添加i标签...现在尝试让我的切换工作！

var toggleButton = '<div class="box" style="display: block;"><i class="fa fa-toggle-on fa-2x active" id="on"></i></div>';

显示用户生成的输入上的切换按钮

1 个答案: