Question

我有一个div如下

'<div class="ctrl-info-panel col-md-12 col-centered">'+
    '<h2>You do not have any projects created at the moment.</h2>'+
    '<div id="t1" style="display:inline-flex"  data-toggle="tooltip">'+
        '<p><a href="create_project.jag" class="cu-level2-btn btn-add-new-dark ' + appendCreateprojectDisabled(noOfDatasets) + '" data-toggle="tooltip" data-original-title="Create Project"><span>Create Project</span></a></p>'+
    '</div>'+
'</div>'

我正在尝试在以下函数中向#t1添加属性。

 function appendCreateprojectDisabled(noOfDatasets) {
        var classAppend = '';
        if(noOfDatasets == 0) {
            $("#t1").attr('title','No datasets available');
            classAppend = 'cu-level-btn-disabled';  
        }
        return classAppend;
    }

但该属性未被添加。我没有在工具提示中获得文字。这里的问题是什么？

请注意noOfDatasets为0.

Answer 1

要回答您的问题，您的代码中的问题是订单已执行。

当执行函数appendCreateprojectDisabled(noOfDatasets)时，它会查找不存在的元素$("#t1") ，因为还没有将以下字符串添加到HTML文档中：

'<div class="ctrl-info-panel col-md-12 col-centered">'+
                                '<h2>You do not have any projects created at the moment.</h2>'+
                                '<div id="t1" style="display:inline-flex"  data-toggle="tooltip">'+
                                    '<p><a href="create_project.jag" class="cu-level2-btn btn-add-new-dark ' + appendCreateprojectDisabled(noOfDatasets) + '" data-toggle="tooltip" data-original-title="Create Project"><span>Create Project</span></a></p>'+
                                '</div>'+
                            '</div>'

正如您所注意到的，上面的代码具有元素id="t1"，在调用函数appendCreateprojectDisabled(noOfDatasets)时它不存在。

Answer 2

你在javascript中动态创建了div，所以你只需要一个字符串。你有两种方式。

首先你应该在页面上写下来。

var htmlString = '<div class="ctrl-info-panel col-md-12 col-centered">'+
                            '<h2>You do not have any projects created at the moment.</h2>'+
                            '<div id="t1" style="display:inline-flex"  data-toggle="tooltip">'+
                                '<p><a href="create_project.jag" class="cu-level2-btn btn-add-new-dark ' + appendCreateprojectDisabled(noOfDatasets) + '" data-toggle="tooltip" data-original-title="Create Project"><span>Create Project</span></a></p>'+
                            '</div>'+
                        '</div>';
function appendCreateprojectDisabled(noOfDatasets) {

var classAppend = '';

    $("#aDivInYourPage").html(htmlString);//after register your div you can find your 't1' div. if not it will be undefuned for you. 

    if(noOfDatasets == 0) {
        $("#t1").attr('title','No datasets available');
        classAppend = 'cu-level-btn-disabled';  
    }
    return classAppend;
}

另一种方法是你可以为你的div添加一个特殊字符，例如{TitleAttribute}，并将其替换为您的属性title='No datasets available'

Answer 3

您可以通过将字符串解析为HTML元素来实现此目的。试试这段代码。

 $(document).ready(function () {
  function appendCreateprojectDisabled(noOfDatasets, divElement) {
    var classAppend = '';
    if (noOfDatasets == 0) {
      divElement.find("#t1").attr('title', 'No datasets available');
      classAppend = 'cu-level-btn-disabled';
    }
    return classAppend;
  }

  var divElement = '<div class="ctrl-info-panel col-md-12 col-centered">' +
                   '<h2>You do not have any projects created at the moment.</h2>' +
                   '<div id="t1" style="display:inline-flex"  data-toggle="tooltip">' +
                   '</div>' +
                   '</div>'
  divElement = $(divElement);
  var paraElement = '<p><a href="create_project.jag" class="cu-level2-btn btn-add-new-dark ' + appendCreateprojectDisabled(0, divElement) + '" data-toggle="tooltip" data-original-title="Create Project"><span>Create Project</span></a></p>'
  divElement.find("#t1").append($(paraElement));
  $(document.body).append(divElement);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

希望这会对你有所帮助。

Answer 4

做这样的事情：

var classAppend = "";
var classAppend =  appendCreateprojectDisabled(noOfDatasets);

确保classAppend具有某种价值;你可以在任何你想要的地方附加你的HTML。

var html = '<div class="ctrl-info-panel col-md-12 col-centered">' +
        '<h2>You do not have any projects created at the moment.</h2>' +
        '<div id="t1" style="display:inline-flex"  data-toggle="tooltip">' +
        '<p><a href="create_project.jag" class="cu-level2-btn btn-add-new-dark ' + classAppend + '" data-toggle="tooltip" data-original-title="Create Project"><span>Create Project</span></a></p>' +
        '</div>' +
        '</div>';

现在可以在任何地方使用这段HTML。首先调用以下函数。

function appendCreateprojectDisabled(noOfDatasets) {
        var classAppend = '';
        if(noOfDatasets == 0) {
            $("#t1").attr('title','No datasets available');
            classAppend = 'cu-level-btn-disabled';  
        }
        return classAppend;
    }

Jquery属性未添加到div元素

4 个答案: