查找最近的圖像元素和刷新圖像源

我有下面的標記查找最近的圖像元素和刷新圖像源

<div class="col-md-4"> 
    <div class="row"> 
     <img name="previewImage" alt="" src="" style="max-height:300px;max-width :350px;"> 
    </div> 
    <div class="row"> 
     <button name="btnPushPhoto" type="button" class="btn btn-default" tabindex="-1">Push</button> 
     <button name="btnRemovePhoto" type="button" class="btn btn-default" tabindex="-1">Remove</button> 
    </div> 
</div>

當我點擊刪除按鈕的照片，我能夠把我的形象爲空（在服務器端），但是在客戶端，我在定位圖片標籤時遇到了一些困難，並對其進行了刷新。

$(document).on("click", "[name=btnRemovePhoto]", function() { 
    var r = confirm("Are you sure you want to remove the photo?"); 
    if (r == true) { 
     var uniqueId = $(this).data('uniqueId'); 
     $.post($("#remove-photo-url").val(), { uniqueId: uniqueId }) 
      .done(function() { 
       //var img = $(this).closest('[name=previewImage]'); 
       var img = $(this).parent().parent().find('[name=previewImage]'); 
       console.log(img);        
       img.attr('src', ''); 
       img.attr('src', img.attr('src') + '?' + Math.random()); 
      }); 

    } 

});

這裏沒有什麼事情發生。瀏覽器的控制檯沒有錯誤。

這是console.log(img);

[prevObject: x.fn.x.init[0], context: undefined, selector: "[name=previewImage]"]

來源

2016-02-12 Jack Shepherd

什麼的console.log（IMG）的輸出？ – DoctorMick

屬性選擇器需要[name ='btnRemovePhoto']（在這種情況下，單引號） https://api.jquery.com/attribute-equals-selector/ – MaxRocket

'this' inside'done（）'callback指jqXHR選項對象 –

你應該在一些變量$(this)存儲POST請求之前，因爲回調裏面，這指的是Ajax調用的jqXHR對象，而不是元素的事件處理程序綁定到：

_this = $(this);

那麼你可以使用parents()相反：

var img = _this.parents('.col-md-4').find('[name="previewImage"]');

希望這會有所幫助。

來源

2016-02-12 16:00:00

輸出你可以使用jQuery選擇「最接近」

https://api.jquery.com/closest/

  $(document).on("click", "[name=btnRemovePhoto]", function() { 
       var clickedButton = $(this); 
       var r = confirm("Are you sure you want to remove the photo?"); 
       if (r == true) { 
        var uniqueId = $(this).data('uniqueId'); 
        $.post($("#remove-photo-url").val(), { uniqueId: uniqueId }) 
         .done(function() { 
          var img = clickedButton .closest("div.col-md-4").find("img"); 
          console.log(img);        
          img.attr('src', ''); 
          img.attr('src', img.attr('src') + '?' + Math.random()); 
         }); 

       } 

      });

來源

2016-02-12 15:57:58 Thangaraja

試試這個：

$(document).on("click", "[name=btnRemovePhoto]", function() { 
     var r = confirm("Are you sure you want to remove the photo?"); 
     if (r == true) { 
      var uniqueId = $(this).data('uniqueId'); 
      var $this = $(this); //Insert this line 
      $.post($("#remove-photo-url").val(), { uniqueId: uniqueId }) 
       .done(function() { 
        var img = $this.closest("div.col-md-4").find("img"); //USE $this 
        console.log(img);        
        img.attr('src', ''); 
        img.attr('src', img.attr('src') + '?' + Math.random()); 
       }); 

     } 

    });

來源

2016-02-12 15:59:21

您應該$.post功能前移到img定義：

$(document).on("click", "[name=btnRemovePhoto]", function() { 
    var img = $(this).parent().parent().find('[name=previewImage]'); 
    var r = confirm("Are you sure you want to remove the photo?"); 
    if (r == true) { 
     var uniqueId = $(this).data('uniqueId'); 
     $.post($("#remove-photo-url").val(), { uniqueId: uniqueId }) 
     .done(function() { 
      //var img = $(this).closest('[name=previewImage]'); 
      console.log(img);        
      img.attr('src', ''); 
      img.attr('src', img.attr('src') + '?' + Math.random()); 
     }); 
    } 
});

來源

2016-02-12 16:02:16

我認爲你正在尋找的方式/看關係需要稍微修改。有幾個jQuery方法，可以幫助，但我平時喜歡繪製出在我的腦袋的關係如下圖所示：

<div name="PARENT_of_PARENT_of_X"> 
        <div name="Sibling_of_PARENT_of_X OR child_of_PARENT_of_PARENT_of_X> 
         <img name="Child_of_SIBLING_of_PARENT_of_X OR CHILD_of_PARENT_of_PARENT_of_X" /> 
        </div> 
        <div name="PARENT_of_X"> 
         <button ></button> 
         <button name="SOURCE X" >Remove</button> 
        </div> 
</div>

來源

2016-02-12 16:04:35 TylerT

查找最近的圖像元素和刷新圖像源

回答

相關問題