在html中以html动态更改标签文本

时间:2014-04-25 06:02:55

标签: javascript php jquery html

我正在努力学习Jquery。在动态更改标签文本时遇到问题。

这是我的代码

我有

$db = new db();
$rings = $db->query("SELECT * FROM rings");

现在稍后,我将在滑块中添加所有铃声

foreach($rings as $ring){
    echo '<li> <input type="image" src="' . $ring['ringThumbNailImagePath'] . '" name="checked" value="" width="150" height="150" /></li>';
}           

代码中有一个标签

<label for="ringName" id="ringName" style="color: #701344; font-size: 10pt" ></label>

现在单击Ring我想动态更改标签文本。

我如何在jquery中执行此操作。

我做了以下事情

创建了一个文件:并将其添加到我的主html <script src="js/jquery.rings.js"></script>

内容

$('input[type="image"]').click(function()
{
   $ring = $(this).val();
   $('label#ringName').text($ring['ringSetName']);
});

我也改变了输入

         echo '<li> <input type="image" src="' . $ring['ringThumbNailImagePath'] . '" name="checked" value=$ring width="150" height="150" /></li>';

如果点击什么都没有发生,我该如何调试哪些不起作用?

3 个答案:

答案 0 :(得分:1)

你可以尝试这样的事情:http://www.jqversion.com/#!/BvENIbA

$('input[type="image"]').click(function(){
    $('label#ringName').text($(this).val());
});

稍后编辑:如果您需要将db中的其他值添加到标签,则可以使用以下数据:

$('input[type="image"]').click(function(){
    $('label#ringName').text($(this).data('my-info'));
});

HTML:

foreach($rings as $ring){
    echo '<li> <input type="image" src="' . $ring['ringThumbNailImagePath'] . '" name="checked" value="" width="150" height="150" data-my-info="' . $ring['xx'] . '" /></li>';
}

<强> See a demo

答案 1 :(得分:0)

您必须将ringName字段作为数据库列才能生效。替换foreach循环。

  foreach ($rings as $ring) {
    echo '<li> <input type="image" src="' . $ring['ringThumbNailImagePath'] . '"'
            . ' name="checked" value="" width="150" height="150"'
            . ' onClick="js:$(\"#ringName\").text(\"'.$ring['ringName'].'\");"/></li>';
  }

答案 2 :(得分:0)

您需要添加的铃声元素或图片的唯一ID。

然后对于该环ID,您可以设置onClick侦听器

$('#ringID').click(function(){
    $('label#ringName').text("clicked the Image");
});

<强> Demo