Jquery on hover adding data id and with another on hover geting the data id but it is only getting the first id

Question

In first hover i am getting data id from thumbs and adding to #main image it is working fine and with 2nd hover on #main i am getting the data id again here from the first data id. but it is only getting the 1 data id not another ids when i am changing it on first hover.

<div class="gry">
    <img id="main" src="images/1.jpg" alt="alt" data-id="1" />
    <img id="sm001" src="images/1.jpg" alt="alt" data-id="1" />
    <img id="sm002" src="images/2.jpg" alt="alt" data-id="2" />
    <img id="sm003" src="images/3.jpg" alt="alt" data-id="3" />
    <img id="sm004" src="images/4.jpg" alt="alt" data-id="4" />
</div>

$('img[id^=sm00]').hover(function() {
  $('#main').attr({src:$(this).data('img'), alt:$(this).attr('alt'), "data-id":$(this).attr('data-id')});
});

$('#main').hover(function() {
    var form_data = new FormData();
    form_data.append('action', 'view-img');
    form_data.append('id', $(this).data('id'));
    alert($(this).data('id'));
    $.ajax({
        url: 'load.php',
        dataType: 'json',
        processData: false,
        contentType: false,
        data: form_data,
        type: 'post',
        success: function (response) {
            var code = response.code;
            $( ".gry" ).append( "<img id='vimg' />" );
            $('#vimg').attr('src', code);
        }
    });
},function () {
    $("#vimg").remove();
});

`$(..).attr("data-id", val)` won't be returned when you do `$(..).data("id")` - jquery keeps .data cached, it doesn't read the `data-id` attribute each time. Read *and set* data via matching `$(..).data("id", newvalue)` / `$(..).data("id")` — freedomn-m, Aug 29 '20 at 14:18
Does this answer your question? [Unable to set data attribute using jQuery Data() API](https://stackoverflow.com/questions/6827810/unable-to-set-data-attribute-using-jquery-data-api) — freedomn-m, Aug 29 '20 at 14:19
thank you all for your help, can you edit full code or can explain? freedomn-m — Amir Alam Khan, Aug 29 '20 at 14:32
do `console.log(response.code)` and see what it has ? Also try to change `` to `` — Swati, Aug 29 '20 at 14:46

score 0 · Accepted Answer · answered Aug 29 '20 at 15:27

0

I just fixed the issue i just take the data id in input value it working fine now :)

answered Aug 29 '20 at 15:27

Amir Alam Khan

47
10

Jquery on hover adding data id and with another on hover geting the data id but it is only getting the first id

1 Answers1