Saya memiliki tautan tooltip dengan atribut "data-id" yang berbeda.

<a href="" class id="tooltip" data-id="125">Link</a>
<a href="" class id="tooltip" data-id="38">Link 2</a>

Dalam kasus ini, "125" atau "38" dari atribut "data-id" harus dikirim dengan ajax ke skrip sisi server saya bergantung pada tautan mana yang saya arahkan.

Masalahnya adalah hanya atribut "data-id" dari tautan pertama yang diambil ketika saya mengarahkan kursor ke Tautan 1. Saya tidak dapat membuat skrip saya berfungsi karena atribut data-id dari tautan kedua diambil ketika saya arahkan kursor ke Tautan 2. Juga tidak ada kesalahan yang ditampilkan di konsol.

  jQuery(function($) {
    
var html_data = $("#tooltip").attr("data-id");
        
$( "#tooltip" ).tooltip({
    content: function( response ) {
        $.ajax({ 
        url: "/datenbank/itemscript.php",
        data: {
                'var': html_data
            },
        type: "GET"
        })
          .then(function( data ) {
             response( data );
          });
    },
    items: "*"
});
    
    
        });
0
Peros 4 Januari 2021, 19:14

3 jawaban

Jawaban Terbaik

Pertama-tama, Anda menggunakan pemilih id menggunakan jQuery. pemilih id jQuery hanya memilih satu elemen, tidak lebih. jadi tooltip Anda hanya diterapkan pada tautan pertama.

Agar benar, Anda harus menambahkan atribut baru seperti tooltip-link dan menghapus duplikat id="tooltip" di 2 tautan, itu salah.

<a tooltip-link data-id="124">Link</a>
<a tooltip-link data-id="83">Link 2</a>

Dan dalam Javascript

 jQuery(function($) {   
  $( "[tooltip-link]" ).each(function(i) {
    var id = $(this).attr("data-id");
    $(this).tooltip({
      content: function( response ) {
          $.ajax({ 
          url: "/datenbank/itemscript.php",
          data: {
                  'var': id
              },
          type: "GET"
          })
            .then(function( data ) {
               response( data );
            });
      },
      items: "*"
    });
  })
});

Jika Anda tidak suka memodifikasi html, Anda dapat melakukan hal berikut:

jQuery(function($) {   
      $( "[id='tooltip']" ).each(function(i) {
        var id = $(this).attr("data-id");
        $(this).tooltip({
          content: function( response ) {
              $.ajax({ 
              url: "/datenbank/itemscript.php",
              data: {
                      'var': id
                  },
              type: "GET"
              })
                .then(function( data ) {
                   response( data );
                });
          },
          items: "*"
        });
      })
    });
1
Zang wei 4 Januari 2021, 16:41

Saya pikir Anda harus mengambil pendekatan lain untuk memecahkan masalah seperti ini karena jika Anda mengambil atribut id dari suatu elemen, itu akan mengambil kemunculan pertama dari atas.

Mungkin Anda dapat mencoba dengan fungsi .mouseenter() dan menggunakan kelas alih-alih id.

HTML:

<a href="" class="tooltip" data-id="125">Link</a>
<a href="" class="tooltip" data-id="38">Link 2</a>

JQuery:

$(document).on("mouseenter", ".tooltip", function(e){
    var html_data = $(this).data('id');
    $.ajax(...)
});
0
Yaaruu 4 Januari 2021, 16:35

Alasan mengapa hanya mendapatkan data-id pertama karena Anda tidak dapat mengatur id elemen yang sama. Untuk mendapatkan data-id untuk setiap tautan. alih-alih ID gunakan tooltip sebagai kelas

Seperti ini

<a href="" class="tooltip" data-id="125">Link</a>
<a href="" class="tooltip" data-id="38">Link 2</a>

JQuery

$( ".tooltip" ).tooltip({
       let html_data = $(this).attr("data-id");
        content: function( response ) {
            $.ajax({ 
            url: "/datenbank/itemscript.php",
            data: {
                    'var': html_data
                },
            type: "GET"
            })
              .then(function( data ) {
                 response( data );
              });
        },
        items: "*"
    });
        
 });

Lihat contoh di sini tentang cara mendapatkan setiap id data:

http://jsfiddle.net/kbyanr9q/

0
JL Barcelona 4 Januari 2021, 16:41