全球如果其他语句

Question

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

Answer 1

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

Answer 2

试着这么做;

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