全局如果其他语句

Global If Else Statements

本文关键字：语句 其他 如果 全局      更新时间：2023-09-26

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!');
    }
});

尝试类似的东西;

<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();
});

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);
});
相关文章：