基于javascript输出自定义html中的文本

时间:2013-02-20 20:55:12

标签: php javascript jquery

我有一个模态对话框功能,使用javascript / jquery脚本设置,当用户单击按钮时会弹出该脚本。我从按钮中提取数据以找出哪个按钮。但是弹出的文本在html中设置了一个调用脚本函数的div。

我的问题是,如何根据我在脚本中提取的数据自定义此文本。

以下是相关代码,让您了解我正在尝试做什么:

剧本:

<script>
$(function() {
  $( "#dialog-modal" ).dialog({autoOpen: false, height: 250, width: 400, modal: true});

  $( "#opener" ).click(function() {
                       $( "#dialog-modal" ).dialog( "open" );

                       $.get('/like_artist.php', {artist_id : $(this).data('artist_id')}, function(data) {
                             alert("Data Loaded: " + data.artist_id);
                             }, "json");

        });

  });
</script>

在这个div中调用它:

<div id="dialog-modal" title="Basic dialog">
<p>You have just liked </p>

<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

用户点击的按钮(具有不同data-artist_id值的众多按钮之一):

<div class="button_row">
                        <button type="button" id="opener" data-artist_id="1">Play My City</button>
                    </div>

基本上我想让artist_id通知div来为每个按钮定制对话框中的文本。

非常感谢你的帮助!

1 个答案:

答案 0 :(得分:1)

我认为你在找这样的东西?

$( "#opener" ).click(function(e) {
    var text = '';
    var artistId = $(e.target).data('artist_id');
    switch(artistId) {
        case 1: text = 'text for artist 1'; break;
        case 2: text = 'text for artist 2'; break;
        default: text = 'unknown'; break;
    }
    $('#idOfPTagWhereYouWantText').text(text);