我正在使用jquery动态创建表。我将图像放在表格的最后一个单元格中，当鼠标悬停在最后一个单元格中的该图像上时，我想显示图像预览。还有一个条件，我要从数据库获取文件路径和文件类型，所以如果文件类型不是图像，则我不想显示图像预览。我为此编写了代码，但我猜有一个错误，因为它会显示每种文件类型的图像预览。
<script>
if($.fn.dataTable.isDataTable( '#example' )){
var table = $('#example').DataTable();
}
function getData(){
$('#example tbody').html('');
var URL_PREFIX="http://localhost:8983/solr/archiveCore/select?q=strSO_copy:";
var URL_MIDDLE="AND PackName_copy:";
var URL_SUFFIX="AND DocType_copy:";
var strSO="\"" + $("#ngramBoxstrSO").val() + "\"";
var PackName="\"" + $("#ngramBoxPackName").val() + "\"";
var DocType="\"" + $("#ngramBoxDocType").val() +"\"";
var URL=URL_PREFIX + strSO + URL_MIDDLE + PackName + URL_SUFFIX + DocType;
$.ajax({
url:URL,
dataType:'jsonp',
jsonp : 'json.wrf',
type :'get',
cache :false,
success: function(data){
var docs=data.response.docs;
var html='';
$.each(docs,function(key,value){
var arrayExtensions=["jpg","JPG","JPG File","jpeg","JPEG image","PNG","TIFF image","tiff"];
html+='<tr>';
html+='<td>'+value.id+'</td>';
html+='<td>'+value.strSO+'</td>';
html+='<td class="text-center">'+value.PackName+'</td>';
html+='<td class="text-center">'+value.DocType+'</td>';
html+='<td class="text-center">'+value.DocName+'</td>';
html+='<td class="text-center"><form method="POST" action="openDocumentServlet" target="_blank"><input name="document" value="'+value.FilePath+'" hidden><input name="docName" value="'+value.FileName+'" hidden><input id="buton" type="submit" class="btn btn-sm" value="OPEN"></form></td>';
html+='<td class="text-center" id="mouse"><a href="#" class="preview"><img src="images//SoftwareIcons-21-512.png" style="width:50px;height:50px;" id="imageicon"><img id="showImages" src="T:\\Temp\\'+value.FileName+'" class="hide-image"/></a></td>';
html+='</tr>';
var n=arrayExtensions.indexOf(value.extType[0]);
console.log(n);
if(n>-1){
$(document).on("mouseover", ".preview", function() {
$(this).find("#showImages").fadeIn();
});
$(document).on("mouseout", ".preview", function() {
$(this).find("#showImages").fadeOut();
});
}
else{
console.log("file not image");
$(this).find("#showImages").fadeOut();
}
});
$('#example').DataTable().destroy();
$('#example tbody').html(html);
var table=$('#example').DataTable({
"aaSorting" : [],
});
},
});
};
</script>
答案 0 :(得分：1)
正如我在评论中所说：
我认为问题出在您在
.preview元素上添加事件侦听器的方式上。您当前的操作方式（
$(document).on("mouseover", ".preview", ...);），每次.preview（ = 每次循环遇到图片文件类型）。
我只是建议您直接从每次循环迭代中创建的HTML n > -1中影响事件监听器。
我做了一个小片段，应该模拟您所拥有的。 2秒后就会进行（ fake ）AJAX调用。
$(html).find('.preview').on(...);getData();
function getData() {
$('#example tbody').html('');
/*
Here your variables.
*/
fakeAjax({
url: 'your_url',
dataType: 'jsonp',
jsonp: 'json.wrf',
type: 'get',
cache: false,
success: (data) => {
const docs = data.response.docs,
// No need to have the same extensions here even if one is lowercase and not the other.
imageExts = ['jpg', 'png', 'jpeg', 'tiff'];
$.each(docs, (key, value) => {
let html = '', jHtml;
html += '<tr>';
html += `<td>${value.id}</td>`;
html += `<td>${value.strSO}</td>`;
html += `<td class="text-center">${value.PackName}</td>`;
html += `<td class="text-center">${value.DocType}</td>`;
html += `<td class="text-center">${value.DocName}</td>`;
html += '<td class="text-center"><button type="button">OPEN</button></td>';
// ID must be uniques, so "#showImages" becomes ".showImages" here..
html += `<td class="text-center"><a class="preview" href="#">[image_here]<div class="showImages">Thumbnail of ${value.FileName}</div></a></td>`;
html += '</tr>';
jHtml = $(html);
// Adds your HTML before affecting event listeners.
$('#example tbody').append(jHtml);
if (imageExts.includes(value.extType[0].toLowerCase())) {
// Finds .preview from the just created HTML.
jHtml.find('.preview')
.on('mouseover', function() {
$(this).find('.showImages').fadeIn();
})
.on('mouseout', function() {
$(this).find('.showImages').fadeOut();
});
} else {
// -----
// Just for showing that there is no thumbnail.
jHtml.find('.showImages').addClass('no-thumb').text('NO THUMB SORRY');
jHtml.find('.preview')
.on('mouseover', function() {
$(this).find('.showImages').fadeIn();
})
.on('mouseout', function() {
$(this).find('.showImages').fadeOut();
});
}
// -----
});
}
});
}
// Function to simulate the AJAX call. Executes after 2 seconds.
function fakeAjax(options) {
const data = {
response: {
docs: [
{
id: 1,
strSO: 'strSO 1',
PackName: 'Pack name 1',
DocType: 'Image file',
DocName: 'My document',
FilePath: 'path/to/mydocument.png',
FileName: 'mydocument.png',
extType: ['png']
},
{
id: 2,
strSO: 'strSO 2',
PackName: 'Pack name 2',
DocType: 'Text file',
DocName: 'README',
FilePath: 'path/to/readme.txt',
FileName: 'readme.txt',
extType: ['txt']
},
{
id: 3,
strSO: 'strSO 3',
PackName: 'Pack name 3',
DocType: 'Image file',
DocName: 'Photography from France',
FilePath: 'path/to/photofrance.JPG',
FileName: 'photofrance.JPG',
extType: ['JPG']
}
]
}
};
setTimeout(() => {
console.log('AJAX Done. Executing success callback.');
options.success(data);
}, 2000);
}.mouse > a {
position: relative;
display: block;
}
.showImages {
position: absolute;
top: 0;
left: 80px;
display: none;
color: #fff;
background-color: rgba(0,0,0,.5);
}
.showImages.no-thumb {
color: red;
}
.text-center {
text-align: center;
}