【问题标题】:dynamically change text property of jquery dialog动态更改 jquery 对话框的文本属性
【发布时间】:2012-09-27 16:45:47
【问题描述】:

这就是我想要做的。我有几个链接:

<a href="#" title="Title 1">Link 1</a>
<a href="#" title="Title 2">Link 2</a>
<a href="#" title="Title 3">Link 3</a>

然后我有一个通用的&lt;div&gt; 来保存内容,以便我可以重复使用它。是这样的

<div id="contents">
    <div id="data"></div>
</div>

我想要做的是当用户点击任何链接时,jQuery 对话框会打开并显示链接的标题(我已经完成并将显示),但对话框的内容将显示页面上另一个 div 的文本。所以:

<div id="someID">Some special content here</div>

以下是我的 jquery 位:

var link = $('#careers > ul > li > a');
link.click(function (e) {
$('#contents').dialog({
    title: e.target.title,
        text: need #specialcontent // <-- THIS IS THE PART I DON'T KNOW HOW TO CHANGE
     });
    return false;
});

清楚吗?我将在页面上有其他“someID” div,我想根据链接的点击来切换。所以它本质上是根据点击的内容加载一个新的 div。

谢谢

【问题讨论】:

    标签: jquery jquery-ui dialog


    【解决方案1】:

    这样的事情能做你想做的事吗?

    var link = $('#careers > ul > li > a');
    link.click(function (e) {
        if (link.id == "someID")
            var text_value = "someID's text";
        else if (link.id == "someID2")
            var text_value = "someID2's text";
        $('#contents').dialog({
            title: e.target.title,
            text: text_value #specialcontent // <-- THIS IS THE PART I DON'T KNOW HOW TO CHANGE
        });
        return false;
    });
    

    【讨论】:

    • @Nakia 嗯,我现在没有可以试用的测试环境,但是您可以尝试看看是否可以先通过 alert(link.id); 访问那里的 link.id。如果你明白了,那么你可以通过检查继续。如果不是,则将检查放在函数之外。
    • 是的,当我点击链接时,我可以获得 ID。
    • 好吧,您可以在其中访问 id,您可以将其与某个字符串进行比较。根据比较的结果,然后将一些变量 text_value 设置为所需的输出,然后将其提供给您的元素。如果它不适用于您上面的代码,也许试试$('#contents').text(text_value);?作为介于两者之间的一步,您可以尝试alert(text_value); 缩小错误范围,以防万一出现问题。
    • 你建议的方式意味着在变量 text_value 下,我必须把所有的代码放在那里。我正在尝试在那里加载整个 div,它可以包含任何有效的 HTML 元素。当我已经构建了 div 并准备好使用时,这将构成一个非常长的 jscript 部分。明白我的意思吗?
    • 太棒了!那行得通!至少在正确的轨道上。必须将其更改为 $('#someDivD').html(text_value).dialog({}); 我将在链接 ID 上使用 switch 语句,以便我可以使用相同的对话框构建。非常感谢您的帮助!
    猜你喜欢
    • 2011-06-03
    • 1970-01-01
    • 1970-01-01
    • 2013-07-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多