Question

我正在努力学习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>';

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

Answer 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

Answer 2

您必须将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>';
  }

Answer 3

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

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

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

<强> Demo

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

3 个答案: