Ajax改變循環內的onclick事件圖像

Question

我試圖改變循環內的圖像例如如果我點擊也在循環內的按鈕，它完全改變圖像，但其他數據的循環也是更改爲零（0）。我還添加了一個ID到一個可點擊的按鈕，只更改我點擊圖像..

這是iv'e試了一下：

HTML

<div class="ult_tabitemname current"> 
    <div id="dashboard"> 
     <ul class="slider-20" style="width: 5215%; position: relative; transition-duration: 0.2s; transform: translate3d(0px, 0px, 0px);"> 

     <li aria-hidden="false" style="float: left; list-style: none; position: relative; width: 779px;"><a href="#" class="save travel-saved-img-btn" id="img-1058" current-data="saved"><img src="http://myurl.com/temp/wp-content/uploads/SAVED.png"></a><img src="http://myurl.com/temp/wp-content/uploads/1234-1.jpg" class="image-gallery"><input class="mytravel-img-id" img-cat="20" type="hidden" value="1058"></li> 

     <li aria-hidden="true" style="float: left; list-style: none; position: relative; width: 779px;"><a href="#" class="save travel-saved-img-btn" id="img-1059" current-data="save"><img src="http://myurl.com/temp/wp-content/uploads/SAVE.png"></a><img src="http://myurl.com/temp/wp-content/uploads/Travel-Personality-FAQ-image-5_09-1.jpg" class="image-gallery"><input class="mytravel-img-id" img-cat="20" type="hidden" value="1059"></li> 

     <li aria-hidden="true" style="float: left; list-style: none; position: relative; width: 779px;">\<a href="#" class="save travel-saved-img-btn" id="img-1060" current-data="saved"><img src="http://myurl.com/temp/wp-content/uploads/SAVED.png"></a><img src="http://myurl.com/temp/wp-content/uploads/Travel-Personality-FAQ-image-3_03-1.jpg" class="image-gallery"><input class="mytravel-img-id" img-cat="20" type="hidden" value="1060"></li> 

     </ul> 
    </div> 
</div> 

阿賈克斯

$('#dashboard').on("click", 'li a.save', function(){ 

    var img_id  = $('.ult_tabitemname.current li[aria-hidden=false] .mytravel-img-id').val(); 
    var img_cat  = $('.ult_tabitemname.current li[aria-hidden=false] .mytravel-img-id').attr('img-cat'); 
    var curr_data = $('.ult_tabitemname.current li[aria-hidden=false] a.save').attr('current-data'); 

    $.ajax({ 
     type : "POST", 
     url  : stats_area_load.ajax_url, 
     dataType : 'json', 
     data : { 
      action  : 'update_save_ajax', 
      img_id  : img_id, 
      img_cat  : img_cat, 
      curr_data : curr_data 
     }, 
     beforeSend: function(response) { 
      //$('.ult_tabitemname.current div#dashboard').html('<div class="loading-wrap"><img src="/wp-includes/images/spinner-2x.gif"><p class="stat-loading">Loading, Please Wait...</p></div>'); 

     }, 
     success: function(response) { 

      $('a#img-'+img_id).html('<img src="'+response.get_img_url+'" />');    

     } 

    });    
}); 
} 

PHP

add_action('wp_ajax_nopriv_update_save_ajax', 'update_save_ajax', 20); 
add_action('wp_ajax_update_save_ajax', 'update_save_ajax', 20); 
function update_save_ajax(){ 

$img_id  = $_REQUEST['img_id']; 
$img_cat = $_REQUEST['img_cat']; 
$curr_data = $_REQUEST['curr_data']; 
$get_curr_uid = get_current_user_id(); 

$url = get_bloginfo('url'); 
$uploads = $url . '/wp-content/uploads'; 
$save = $uploads. '/SAVE.png'; 
$saved = $uploads. '/SAVED.png'; 

if($curr_data == 'save'){ 
    $get_save_url = $saved; 
    $curr_data_save = 'saved'; 
}else{ 
    $get_save_url = $save; 
    $curr_data_save = 'save'; 
} 


$param = array(
    'get_img_url' => $get_save_url, 
    'change_curr_data' => $curr_data_save, 
    'get_curr_img_cat' => $img_cat 
); 

echo json_encode($param); 

die(); 
} 

只是爲了更清楚這是樣本輸出..如果我點擊的紫色按鈕，它完美的作品，並改變圖像。在第二張照片是其他的形象也改變第一圖像零..他們都在循環..

Answer 1

你肯定只有一個li[aria-hidden=false]整個HTML中？

正確的方法應該像找到唯一的元素，以便通過指定元素的直接parent()來獲取所需的屬性。

$('#dashboard').on("click", 'li > a.save', function(){ 

    // $(this).parent() is the immediate parent of 'a.save' which is 'li' 
    var img_id  = $(this).parent().find('.mytravel-img-id').val(); 
    var img_cat  = $(this).parent().find('.mytravel-img-id').attr('img-cat'); 
    var curr_data = $(this).attr('current-data'); 
... 

參見：

.val()Returns: String or Number or Array

描述：在所述一組匹配元素獲取第一元件的當前值。

.attr(attributeName)Returns: String

說明：獲取一個屬性的值對於該組的匹配元素所述第一元件。