JQuery와, 아약스와 PHP

Question

나는 이미지를 제공하기 위해이 코드를 가지고 :

<?php foreach ($images as $row) : ?>  
        <div class="box col_3"> 
         <p><a href="<?php echo base_url() ?>public/images/fullscreen/<?php echo $row['image'] ?>" rel="prettyPhoto[gallery1]" title="<?php echo $row['title'] ?>"> 
           <img src="<?php echo base_url() ?>public/images/thumbnails/<?php echo $row['image_thumb'] ?>" title="<?php echo $row['title'] ?>" ></a></p>        

           <textarea name="title_image" rows="3" class="title_image"><?php echo $row['title'] ?></textarea> 
             <input type="hidden" class="id_image" class="id_image" value="<?php echo $row['id_image'] ?>" > 
             <input type="submit" name="update_image" id="update_image" value="Update" class="submit" /><br> 
         <a href="#" class="delete" id="<?php echo $row['id_image'] ?>">Delete image</a> 
        </div> 
       <?php endforeach; ?> 

사용자가 이미지를 업로드하고, 상자의 클래스가 생성됩니다와 모든 이미지의 div 수 있습니다. 업데이트를 위해 데이터를 보내는 코드입니다.

$(function(){   
    $('.submit').click(function(){ 
     ('.box').append('<img src="<?php echo IMG ?>loadinfo.net.gif" id="loading" />'); 
     var id = $('.id_image').val();    
     var title = $('.title_image').val();   

     $.ajax({ 
      url: "<?php echo site_url('gallery/update_image') ?>", 
      type: 'POST', 
      data: 'id=' + id + '&title=' + title, 
      success: function(){ 
       $('#loading').fadeOut(500, function(){ 
        $(this).remove(); 
       }); 
      } 
     });   
     return false; 
    });     
}); 

이것은 첫 번째 상자에만 적용되며 나머지는 그렇지 않습니다. 작동하게하려면 어떻게해야합니까?

Answer 1

당신이 자바 스크립트에서 CSS 클래스를 참조하는 것은

$('.id_image').val() 

이 항상이 클래스의 예를 들어, 첫 등장의 값을 반환합니다 첫 번째 이미지. 제출 버튼을 사용하여 DOM을 트래버스하려고 시도합니다 (예 : ).

$('.submit').click(function(){ 
var id = $(this).prevAll('.id_image').val(); 

올바른 id 값을 반환해야합니다. 는 당신은 로딩 이미지는 동일한 방법을 사용하여 업데이트 할 제목

를 얻기 위해 같은 방법을 사용할 수 있지만, 이번에는 당신은 당신이()를 선택

$(this).parents('.box').append('<img src="<?php echo IMG ?>loadinfo.net.gif" id="loading" />'); 

부모를 사용해야합니다 이제 하나의 로딩 이미지 만 지정하면 제거 기능이 예상대로 작동합니다.