我正在努力学习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>';
如果点击什么都没有发生,我该如何调试哪些不起作用?
答案 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 强>