如何使用 jquery 更改 div 标题答案

【问题标题】：How to change div title using jquery如何使用 jquery 更改 div 标题
【发布时间】：2019-09-19 04:07:39
【问题描述】：

我有以下代码：

<div id="DivPassword" title="test" >

我想更改 div 标题，我有以下代码：

 function ChangeAttribute() {
         $("#DivPassword")
            .attr('title', 'Photo by Kelly Clark');
         $('#DivPassword').dialog('open');
         return false;
     }

当对话框打开时，标题仍然是测试！如果我没有为 div 分配任何标题，则对话框不会显示任何标题。我该如何纠正？

 function ChangeAttribute() {
         $("#DivPassword")
            .attr('title', 'Photo by Kelly Clark')
            .dialog('open');

         alert($("#DivPassword").attr('title'));
     }

$('#DivPassword').dialog({
             autoOpen: false,
             width: 800,
             buttons: {
                 "Cancel": function() {
                     $(this).dialog("close");
                 },
                 "Accept": function() {
                 alert($(this).attr('title'));
                     $(this).dialog("close");
                 }
             }
         });

 <script type="text/javascript">
     var Dtitle;
     $(function() {
        $('#DivPassword').dialog({

             autoOpen: false,
             width: 800,
             title : Dtitle,
             buttons: {
                 "Cancel": function() {
                     $(this).dialog("close");
                 },
                 "Accept": function() {
                     $(this).dialog("close");
                 }
             }
         });
     });

     function ChangeAttribute(name) {
         $("#DivPassword")
            .attr('title', name)
            .dialog('open');
         Dtitle = $("#DivPassword").attr('title');
         alert(Dtitle);
     }


</script>

【问题讨论】：

标签： jquery

【解决方案1】：

您可以直接更改对话框的标题：

$('#DivPassword').dialog('option', 'title', 'Photo by Kelly Clark');

这将适用于您的情况。实际上，您更改标题属性的代码是正确的。我猜想在第一次调用 .dialog 时，对话框插件会创建对话框。 open 方法只是显示对话框，而不是从 div 重新创建它。

【讨论】：

我已经按照上面编辑的部分更改了代码。不过，我可以t figuire out why its 不工作。
您仍然没有使用对话框方法来设置标题。您可以在警报语句之前添加我的行，它应该可以工作。
完美运行 - 我尝试了不同帖子和文章中的所有其他方式。这显然是最优雅的解决方案.. 也就是最好的！我已经学习/使用 jquery 对话框几个月了，只是在这里第一次看到这种做事方式。不知道为什么 docs、tuts 和帖子没有更多地强调这种类型的解决方案，因为它在许多不同的代码情况下非常有用/强大..？ .. 非常感谢您分享了一个很棒的单线

【解决方案2】：

您可以使用 jQuery 更改任何 DOM 元素的任何属性，如下所示：

$("#divMessage").attr('title', 'Type here the new Title text');

干杯！

【讨论】：

【解决方案3】：

您是否尝试过这里给出的任何建议： How to change an element’s title attribute using jQuery?

看起来您正在按照公认答案的建议进行操作。如果这不起作用，也许其他人会。

【讨论】：

【解决方案4】：

感谢大家的回答。

$('#DivPassword').dialog({ 必须在 .dialog('open'); 之后

最简单的方法如下：

 $("#DivPassword")
            .dialog('open');
         $('#DivPassword').dialog({
             autoOpen: false,
             title: $('#DivPassword').attr('title') + name,
             width: 400,
             buttons: {
                 "Cancel": function() {
                     $(this).dialog("close");
                 },
                 "Accept": function() {
                     $(this).dialog("close");
                 }
             }
         });

【讨论】：

【解决方案5】：

$("#div1").dialog({ autoOpen: false, modal: true, height: 420, width: 750, resizable: false });
// more code
$("#div1").dialog("option", "title", "joopla, here is a new title");

为我做了诀窍..

【讨论】：

【解决方案6】：

听起来您的插件在到达该 ChangeAttribute 函数之前正在读取标题。您发布的代码肯定会更改标题属性，因此幕后还有其他事情发生。

另外，当我在这里时，不要忘记使用链接。 jQuery 中的大多数函数再次返回相同的对象：

$("#DivPassword").attr('title', 'Photo by Kelly Clark').dialog('open');

// or like this, perhaps easier to read:

$("#DivPassword")
    .attr('title', 'Photo by Kelly Clark')
    .dialog('open')
;

【讨论】：

我已尝试添加警报...如上面编辑的代码中所示。但是虽然两个警报都显示了正确的标题，但标题并没有显示出来。

【解决方案7】：

尝试在对话框打开后设置标题属性。可能您的 dialog.open() 将重置标题属性。

我认为你可以为 open 事件提供一个回调函数。

见open

【讨论】：

如果它一直在重置，那么我不会显示t think the inital title would have been displayed! What do you think about that? The new title that is being assigned isnt。

【解决方案8】：

指定对话框的标题。这标题也可以由对话框源的标题属性元素。

代码示例

使用指定的标题选项初始化对话框。

$( ".selector" ).dialog( { title: 'Dialog Title' } );

在初始化之后获取或设置标题选项。

//getter
var title = $( ".selector" ).dialog( "option", "title" );
//setter
$( ".selector" ).dialog( "option", "title", 'Dialog Title' );

source.

回答您的the dialog doesnt show any title。

【讨论】：

【解决方案9】：

我这样做了：

$("#div1").dialog({ autoOpen: false, modal: true, height: 420, width: 750, resizable: false });
//more code
$("#div1").dialog("option", "title", "joopla, here is a new title");

这对我有用

【讨论】：