怎么判断表头中的字段是否包含img标签,并给这些包含img标签的字段单独设置样式,以及遇到的问题?

if($(".isParentsTitle #datagrid-title-ajax td span span").find('img')){
         $(".isParentsTitle #datagrid-title-ajax td span span img").parent().parent().css('cursor','pointer');
      }

遇到的问题很坑,使用单引号找不到属性

完善

 //检验文档关联表排序
     //查找包含img标签的td
     if( $(".isChildsTitle #datagrid-title-ajax td span span").find('img')){
       console.log("检验文档关联表排序");
        //加上小手样式
       $(".isChildsTitle #datagrid-title-ajax td span span img").parent().parent().addClass('table-pointer');
       var isChildsTitleImg=$(".isChildsTitle #datagrid-title-ajax td span span").find('img');
          for(var i=0;i

优化,为了减少其他影响,去掉类和ID,用原始标签,这样放到全局JS,就不用一次次去调。

function tdTextSort(){
    //查找包含img标签的td
   if( $("tbody tr td span span").find('img._sortImg')){
     //加上小手样式
    $("tbody tr td span span img._sortImg").parent().parent().css({'cursor':'pointer'});
    var isChildsTitleImg=$("tbody tr td span span").find('img._sortImg');
       for(var i=0;i

优化,直接调用别人写的方法,不用自己写,但是会有闭包现象和需要阻止冒泡

function tdTextSort(){

    //查找包含img标签的td
   if( $("tbody tr td span span").find('img._sortImg')){
     //加上小手样式
    $("tbody tr td span span img._sortImg").parent().parent().css({'cursor':'pointer'});
    var isChildsTitleImg=$("tbody tr td span span").find('img._sortImg');
       for(var i=0;i

优化:为了避免重复调用,一开始没有这个类的时候可以点击,后面给元素绑定类名,就不能点击。

function tdTextSort(){
    //包含img标签的td
    var tdHasImg=$("tbody tr td span span").find('img._sortImg');
    var tdHasImgText= $("tbody tr td span span img._sortImg").parents('td.datagrid-cell');
   if(tdHasImg){
     //加上小手样式
     tdHasImgText.css({'cursor':'pointer'});
       for(var i=0;i

发现列拖动也会触发排序,改成点击span

 function tdTextSort(){
    
    //包含img标签的td
    var tdHasImg=$("tbody tr td span span").find('img._sortImg');
   if(tdHasImg){
     var spanHasImgText= $("tbody tr td span span img._sortImg").parent().parent();
     //加上小手样式
     spanHasImgText.css({'cursor':'pointer'});
       for(var i=0;i

最后解决,

1. 因为JS放在底部,可以加载出功能,但是放在头部就不行了,所以在script中加上defer属性

2. 使用on绑定click事件代替直接click

因为on() 方法适用于尚未创建的元素,正确的用法如:

$('ul').on('mouseenter', 'li .pic', function() {
		
})
(function($){
    $(window).on('load',function(){   
         //包含img标签的td
         var tdHasImg=$("tbody tr td span span").find('img._sortImg');
        if(tdHasImg){
          var spanHasImgText= $("tbody tr td span span img._sortImg").parent().parent();
          //加上小手样式
          spanHasImgText.css({'cursor':'pointer'});
            for(var i=0;i

 

你可能感兴趣的:(JS)