时间戳

首页 > 解决方案 > 当数据类型不是图像时如何禁用鼠标悬停功能

jquery - 当数据类型不是图像时如何禁用鼠标悬停功能

问题描述

我有一个数据库，我在里面保存数据。在我的数据库中，有 .pdf、.docx、.jpg、.png 等文件的路径。在我的网络项目中，我想在数据表中构建一个图像预览部分。我动态构建数据表。所以我想在查询结果不是图像时禁用鼠标悬停功能。我为此编写了此代码。

    <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='';
            var arrayExtensions=['jpg','JPG','JPG File','jpeg','JPEG image','PNG','TIFF image','tiff'];
            $.each(docs,function(key,value){
                console.log(value.extType[0]);
                    if(arrayExtensions.indexOf(value.extType)===-1){
                        $(this).find('img').fadeOut();
                    }

                    else{
                        $(document).on("mouseover", ".preview", function() {

                              $(this).find('img').fadeIn();
                            });
                        $(document).on("mouseout",".preview",function(){
                            $(this).find('img').fadeOut();
                        });
                    }
                html+='<tr>';
                html+='<td>'+value.id+'</td>';
                html+='<td>'+value.strSO+'</td>';
                html+='<td>'+value.PackName+'</td>';
                html+='<td>'+value.DocType+'</td>';
                html+='<td>'+value.DocName+'</td>';
                html+='<td class="text-center"><button id="'+value.FilePath+'" type="button" onclick="openDocument(this.id)" class="btn btn-sm" >OPEN</td>';
                html+='<td class="ImagePreview"><a href="#" class="preview">Image Preview<img id="showImage" src="'+value.FilePath+'" class="hide-image"></a></td>';
                html+='</tr>';

            });
            $('#example').DataTable().destroy();
            $('#example tbody').html(html);
            var table=$('#example').DataTable({
                "aaSorting" : [],

            });
        },
    });


};
</script>

但是当我将鼠标悬停时，没有任何动作。问题出在哪里？

标签： jquery

解决方案

您正在检查整个文档的鼠标悬停。但是，您可以在 jQuery 中使用 :not 选择器。

* 选择器选择所有元素。因此，如果我们将这两者结合起来，我们会得到：

$('*:not(img)').on('mouseover', function() {
  console.log('Not an image!');
});

然而，在你的代码上应用这个，你可能会有这样的事情：

$('.preview:not(img)').on('mouseover', function() {
  $(this).find('img').fadeOut();
}

要检查文件扩展名，最好将它们放在一个数组中。然后你的代码可以通过这样写来减少很多

// If extension is not in the array it will return -1
if (arrayExtensions.indexOf(value.extType) === -1) {
  $(this).find('img').fadeOut();
}

但是，您正在 js 中构建 HTML。因此，您可以在所需类的行上设置鼠标悬停。所以基本上：

if(arrayExtensions.indexOf(value.extType)===-1){
     html+='<tr>';
   }
else 
   {
     html+='<tr class=".thisHasMouseOver">';                  
   }
 $('.thisHasMouseOver').on('mouseover', function(){
    // Do stuff
   }

推荐阅读