在html中动态更改标签文本[关闭]

I am trying to learn Jquery. Having a problem in dynamically changing the Text of label.

Here is my code

I have

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

Now later on I am adding all the rings in a slider

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

There is a label somewhere in code

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

Now on clicking the Ring I want to change text of label dynamically.

How can i do this in jquery.

I have done following things

Created a file : and added this in my main html <script src="js/jquery.rings.js"></script>

Contents are

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

Also i changed the input to this

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

Howver on clicking nothing happens, how can i debug what is not working?

You can try something like this: http://www.jqversion.com/#!/BvENIbA

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

Later edit: if you need other value from db to be added to the label you can use data like:

$('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

You must have ringName field as a db column for this to work. Replace the foreach loop.

  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>';
  }

You need unique Id of your ring element or Image which you added.

and then for that ring ID you can set onClick listener

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

Demo