1

http://liveweave.com/EvfTww

2 つのラジオ ボタンがあり、1 つは div と表示され、もう 1 つは削除と表示されます。
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

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 に答える
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 に答える