Question

我试图更改循环内的Image例如如果我单击循环内部的按钮，则完全改变了图像，但循环中的其他数据也变为零（0）。我还在可点击的按钮上添加了一个id来更改我单击的图像..

这就是我试过的：

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>

的Ajax

$('#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

您确定整个html中只有一个li[aria-hidden=false]吗？

正确的方法应该是找到唯一元素，以便通过指定元素的直接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

说明：获取匹配元素集合中第一个元素的属性值。

Ajax更改循环内的onclick事件图像

1 个答案: