다른 양식으로 인해 양식이 숨겨 짐

Question

두 가지 양식이 다르며 서로 다른 이름/ID를 가지고 있습니다. 잘 작동하는 양식 중 하나에 숨기기/표시 코드를 추가했습니다. 그러나 불행히도 다른 형태도 그 영향을 받고 있습니다.

코드는 어떤 도움이 이해된다

<?php 
     echo '<button class="add" id="add_'.$index.'"><B>Add Answer</B></button>'; 
     echo '<form style="display:none;" name="answer_'.$index.'" method="post" action="output.php" onClick="refresh()">'; // I dont think openning form from row to row would be nice! 
     echo '<input type="hidden" name="questionid" value="'. $row['id'].'"/>'; 
     echo '<textarea type="text" class="addtext" name="addtext" required id="addtext_'.$index.'" placeholder="Please type your answer here.." ></textarea>'; 
     echo '<button onClick="addsubmit('.$index.');" type="submit" id="addsubmit_'.$index.'" class="addsubmit"><B>Submit</B></button>'; 
     echo '</form>'; 
    ?> 

    <div id="frm"> 
     <form action="enjoin2.php" method="POST"> 
     <p> 
      <label class="username" style="font-family:verdana"><B>Username</B></label> 
      <input type="text" class="user" name="user" required /> 
     </p> 
     <p> 
      <input type="submit" class="login" value="Login" /> 
      <input type="submit" class="register" value="Register" /> 
     </p> 
     </form> 
    </div> 

    <script type='text/javascript'> 
      $(document).ready(function() { 
      $('.add').click(function(e) { 
        e.stopPropagation(); 
       e.preventDefault(); 
       $(this).parent().find('form').slideDown('slow'); 
       $(this).parent().find('form textarea.addtext').focus(); 
       $(this).hide(); 
      }); 

      $('form').click(function(e){ 
       e.stopPropagation(); 
      }); 

      $(window).click(function(e) { 
       console.log($(e.target)); 
       if(!$(e.target).is('form')){ 
       $('.add').show(); 
       $('form').slideUp(); 
       } 

      }); 
     }); 
    </script> 

:: FORM 1/FORM 2/1 FORM JS/같이 따른다.

Answer 1

경우

은 다음 양식 내부의 버튼을 이동 시도하고

$(this).parents('form').slideDown('slow'); 

를 사용하거나 사용 같은 부모 - 순간 당신의 라인 :

$(this).parent().find('form') 

그들은 모두 위트

$(window).click(function(e) { 
    console.log($(e.target)); 
    if (!$(e.target).is('form')) { 
    $('.add').show(); 
    $('form').slideUp(); // this is targetting all forms - you may need to change it to target specific form 
    } 
}); 

: 당신이 다음에 PHP를 변경하는 경우 추가 버튼의 부모를 힌 것은

, 그것은

<?php 
    echo '<div class="wrapper">'; 
    echo '<button class="add" id="add_'.$index.'"><B>Add Answer</B></button>'; 
    echo '<form style="display:none;" name="answer_'.$index.'" method="post" action="output.php" onClick="refresh()">'; // I dont think openning form from row to row would be nice! 
    echo '<input type="hidden" name="questionid" value="'. $row['id'].'"/>'; 
    echo '<textarea type="text" class="addtext" name="addtext" required id="addtext_'.$index.'" placeholder="Please type your answer here.." ></textarea>'; 
    echo '<button onClick="addsubmit('.$index.');" type="submit" id="addsubmit_'.$index.'" class="addsubmit"><B>Submit</B></button>'; 
    echo '</form>'; 
    echo '</div>'; 
?> 

당신은 또한 jQuery를의이 비트를 변경해야 할 수도 있습니다 귀하의 오류 수정해야

업데이트

귀하의 의견에 따라확인 업데이트 -이 추가 사이의 버튼을 전환 있도록/(위의 래퍼 DIV를 사용하여) 제거 위의 창에서 클릭 이벤트 없애 한 다음 추가 클릭을 변경

$('.add').click(function(e) { 
 
    e.stopPropagation(); 
 
    e.preventDefault(); 
 
    
 
    var button = $(this), // get the current button 
 
     form = $(this).parent().find('form'); // get the appropriate form button 
 
    
 
    if (form.is(':visible')) { 
 
    // run this code if your form is visible 
 
    form.slideUp(); 
 
    button.text('Add Answer'); // change the button text so it says add answer 
 
    } else { 
 
    // run this code if the form is not visible 
 
    form.slideDown('slow'); 
 
    form.find('textarea.addtext').focus(); 
 
    button.text('Hide answer'); // change the button text so it says hide answer 
 
    } 
 

 
});

Answer 2

문제는이 라인에서 찾을 수 있습니다

$(this).parent().find('form').slideDown('slow'); 

당신은 모든 형태입니다 버튼의 부모, 이하 모든 형태를 찾고 있습니다. 폼이 항상 당신은 형태와 추가 버튼에서 포장하는 데 필요한 다음 요소

$(this).next('form').slideDown('slow');