선택하고 제거

하나의 요소 (#add_text)를 클릭하면 다른 요소 (#template) 안에 내용 (#text_frame)을 추가하고이 요소 (#text_frame)를 끌 수있는 코드가 있습니다. 선택하고 제거

$('#add_text').mousedown 
    (
    function() 
    {        
    $('#add_text').css('background-color', 'blue'), 
    $('#template').prepend('<div id="text_frame"></div>'), 
    $('#text_frame').draggable('enable'), 
    $('#text_frame').draggable ({containment:'#safe_area',distance:1}); 
    } 
);

어떻게 추가 요소를 클릭하여 그가 국경이 다른 색 제거 된 항목을 추가, 예를 들어 텍스트를 제거하기 위해 다른 버튼을 눌러이었다 같은 눈에 띄었다 것을 할까?

업데이트는 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

<head> 

<meta http-equiv="content-type" content="text/html; charset=windows-1251" /> 


    <title>Add/Delete</title> 

<style type="text/css"> 

div#template 
{ 
    position: relative; outline: 1px #B7C4CE solid; 
     width: 556px; height: 320px; margin-left: auto; margin-right: auto; 
} 

div#text_frame 
    { 
     position:absolute; outline:1px silver solid; background-color:#F7F9FC; width: 96px; 
     height:24px; margin-top: 34px; margin-left: 32px; cursor: pointer;     
    } 

div#add_text,div#delete_text 
    {  
    position: relative; 
     outline:1px silver solid; background-color:red; width: 99px; height: 20px; 
     margin-top: 15px; margin-left: auto; margin-right: auto;  
    } 
</style> 

    <script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
    <script type="text/javascript" src="jquery-ui-1.7.3.custom.min.js"></script> 

    <script type="text/javascript"> 

$(document).ready(function(){ 

    /* ------------------- add_text --------------------*/ 

    $('#add_text').hover 
     (
      function() {$('#add_text').css('outline', '1px blue solid');}, 
      function() {$('#add_text').css('outline', '1px silver solid');}      
     ); 

    $('#add_text').mousedown 
     (
      function() 
      {        
       $('#add_text').css('background-color', 'blue'), 
    $('#template').prepend('<div id="text_frame"></div>'), 
       $('#text_frame').draggable('enable'), 
    $('#text_frame').draggable({containment: '#safe_area', distance: 1});  
      }   
     ); 

    $('#add_text').mouseup 
     (
      function() 
      {        
       $('#add_text').css('background-color', 'red'); 
      }   
     ); 

    /* ------------------- select_delete_text --------------------*/ 

    $('#delete_text').hover 
     (
      function() {$('#delete_text').css('outline', '1px blue solid');}, 
      function() {$('#delete_text').css('outline', '1px silver solid');}      
     ); 

    $('#delete_text').mousedown 
     (
      function() 
      {        
       $('#delete_text').css('background-color', 'blue') 
      }   
     ); 

    $('#delete_text').mouseup 
     (
      function() 
      {        
       $('#delete_text').css('background-color', 'red'); 
      }   
     );  

    $('#text_frame').click // dont work ??? 
     (
      function() 
      {        
       $('#text_frame').css('outline', '1px black solid'); 
      }   
     );   
}); 

</script> 

</head> 

<body> 

    <div id="template"></div> 

     <div id="add_text" class="font_button">add elements</div>   
     <div id="delete_text" class="font_button">delete elements</div> 

<br /><br />1) Press the button several times "add elements"<br /> 
2) drag items<br /><br /> 

how to make:<br /><br /> 
1) Select Item<br /> 
2) change of style (outline color for example) element when it is selected<br /> 
3) Remove the chosen item by pressing the button "delete elements"<br /> 

</body> 
</html>

내가 jQuery를 UI와 jQuery를 사용하고 있습니다 : 이것은 SSCCE의 맛 전체 코드입니다.

출처

2010-11-20 gena

나는 (내가 정말 당신이 요구하는 것을 이해하지 않는 한) 질문에 대한 해결책을 모르지만 빠른 팁 스택 오버플로에 게시 할 때 : 귀하의 질문에 태그를 시도 적절하게. 나는 jQuery와 JavaScript 태그를 추가했다. 당신이 가진 것들은 '제거'와 '선택'이었고, 그 질문이 무엇인지에 대해 아무에게도 말하지 않았습니다. 또한 게시물에서 jQuery UI와 함께 jQuery 프레임 워크에서 JavaScript를 사용하고 있음을 나타내면 도움이됩니다. – pinkfloydx33

시도 :

var newNode = $('<div></div>').attr('id','text_frame').css('border','1px solid red'); 
$('#template').prepend(newNode);

출처

2010-11-20 17:07:04 Kos

선택하고 제거

답변

관련 문제