1

http://liveweave.com/EvfTww

我有两个单选按钮，一个说 div，另一个说删除。
我在 html 中添加了一些 div，当我选择删除时，我希望能够在单击时删除 #canvas 内的 div。

下面提供的功能仅在 div 在选中时已经可见时才有效，但是当我从代码编辑器在画布中添加新 div 时，我也希望能够删除它们。

任何帮助是极大的赞赏。

HTML

<table id="main" border="1">
    <tr>
        <td id="canvas" valign="top"></td>
        <td valign="top">
            <div id="control_box">
                <form id='tools'>
                    <input name="tool" id="tool-1" checked="checked" type="radio">
                    <label for="tool-1">DIV</label>

                    <input name="tool" id="tool-2" type="radio">
                    <label for="tool-2">Remove</label>
                </form><br>

                Border Width <select id="divborder">
                      <option value="1px">1px</option>
                      <option value="2px">2px</option>
                      <option value="3px" selected="selected">3px</option>
                      <option value="5px">5px</option>
                      <option value="7px">7px</option>
                      <option value="8px">8px</option>
                      <option value="9px">9px</option>
                      <option value="10px">10px</option>
                </select><br>

                Border Style <select id="divborderstyle">
                      <option value="dotted">dotted</option>
                      <option value="dashed">dashed</option>
                      <option value="solid" selected="selected">solid</option>
                      <option value="double">double</option>
                      <option value="groove">groove</option>
                      <option value="ridge">ridge</option>
                      <option value="inset">inset</option>
                      <option value="outset">outset</option>
                </select><br>

                Border Color 
                <input id="bcolor" type="text" name="bcolor" value="#f00" /></div><br>

                BG Color
                <input id="bgcolor" type="text" name="bgcolor" value="#000" onchange="window.set_fill_color(this.value); var col = this.value ; $('#colorSelectorFill').ColorPickerSetColor(col);" /></div>
                <input type="button" id="nobg" value="none">
            </div><br><br>

            <textarea id='code' placeholder="The #canvas acts as page body"></textarea>
        </td>
    </tr>
</table>

jQuery/JavaScript

$('#tool-2').change(function() {
    if ($(this).is(':checked')) {
        alert('Remove Tool Chosen! You can now remove divs within the canvas.');

        $('#canvas div').on('click', function() {
            $(this).remove();
            code.val(preview.html());
        });

    } else {
        alert('Houston we have a problem!');
    }
});
4

2 回答 2

0

尝试类似的东西；

<input type="radio" name="test" value="div" checked> div
<input type="radio" name="test" value="remove"> remove

$("input[@name='test']").change(function(){
    $("#parent_div_id").hide();
});
于 2013-10-11T11:37:37.757 回答
0

http://liveweave.com/lXdfqr

使用与以前基本相同的函数，但这次我将它放在另一个名为 canvastools 的函数中，并且我删除了 else 语句，因为我在这个实验中不需要它。

function canvastools(e) {
    if ($('#tool-2').is(':checked')) {
        $('#canvas div').on('click', function() {
            $(this).remove();
            code.val(preview.html());
        });

    }
}

然后我通过说明文档更改时将调用该函数来调用该函数。

$(document).change(function(e) { 
    canvastools(e);
});

我发现使用 select 元素要容易一些，但它并不是完全孤立的。即使选择了另一个工具/选项，删除工具的功能仍将适用。我还没有想出如何解决这个问题。

这是新的小提琴/编织 - http://liveweave.com/e5Efnc

function wrappertools(e) {

    // Tools
    $("select#tools").each(function() {

        // DIV Tool
        if ($(this).val() === 'div') {
            $('#divoptions').show();
            $('#spanoptions').hide();

            // No Background Option
            $('#nobg').click(function() {
                $('input[name=bgcolor]').val('none');
            });

            var bcolor = $('input[name=bcolor]').val(),
                bgcolor = $('input[name=bgcolor]').val(),
                divborderstyle = $('#divborderstyle').val(),
                divborder = $('#divborder').val();

            alert('DIV Tool Selected!');
        }

        // Text Tool
        if ($(this).val() === 'text'){
            $('#spanoptions').show();
            $('#divoptions').hide();

          alert('Text Tool Selected!');

            // No Background Option
            $('#nospanbg').click(function() {
                $('input[name=spanbgcolor]').val('none');
            });

            $('#addspantext').on('click', function() {
                var spanbcolor = $('input[name=spanbcolor]').val(),
                    spanbgcolor = $('input[name=spanbgcolor]').val(),
                    spanborderstyle = $('#spanborderstyle').val(),
                    spanborder = $('#spanborder').val(),
                    spanfont = $('#spanfont').val(),
                    spancolor = $('#spancolor').val(),
                    spansize = $('#spansize').val(),
                    spantext = $('#spantext').val(),
                    placespan = $('<span style="position: relative; font-family: ' + spanfont + '; font-size: ' + spansize + '; font-color: ' + spancolor + '; border: ' + spanborder + ' ' + spanborderstyle + ' ' + spanbcolor + '; background: '+ spanbgcolor +';">' + spantext + '</span>');

                $('.wrapper').append(placespan);
                code.val(preview.html());
            });
            return false;
        }

        // Remove Tool
        if ($(this).val() === 'remove') {
          alert('Remove Tool Selected!');
            $('#divoptions').hide();
            $('#spanoptions').hide();
            $('.wrapper div, .wrapper span').on('click', function() {
                $(this).remove();
                code.val(preview.html());
            });
            return false;
        }
    });
}

$(document).ready(function(e) { 
    wrappertools(e);
});

$(document).change(function(e) { 
    wrappertools(e);
});
于 2013-10-11T12:55:01.507 回答