单击图像的值

时间:2014-05-24 09:34:19

标签: javascript jquery html5 image

我想一个接一个地显示5张图片。让第一张图片值为 1 秒为2 ,依此类推。如何为图像指定值以及单击任何图像时如何在变量中指定检索到的值并在 id =" result_value"

  <div class="images" id="images" >
    <img src="one.gif" class="one" alt="Number 1" width="42" height="42">
    <img src="two.gif" class="two" alt="Number 1" width="42" height="42">
    <img src="three.gif" class="three" alt="Number 1" width="42" height="42">
    <img src="four.gif" class="four" alt="Number 1" width="42" height="42">
    <img src="five.gif" class="five" alt="Number 1" width="42" height="42">
  </div>
  <div class="result_value" id="result_value" ></div>

5 个答案:

答案 0 :(得分:1)

$(document).ready(function(){
    $("#images img").click(function(){
        var va = $(this).attr("src");
        $("#result_value").text(va);
    });
});

请参阅

Fiddle Demo

答案 1 :(得分:0)

您可以使用html5的data-attribute参见this教程。您可以在您的案例中使用jquery事件来简化您的工作。 。希望它有帮助

答案 2 :(得分:0)

使用jQuery:

$('#images img').on('click',function(){
    $('#result_value').text($(this).index('#images img')+1);
});

JS Fiddle Demo

答案 3 :(得分:0)

您可以使用html5数据属性:

<img src="one.gif" data-image-n="1" class="one" alt="Number 1" width="42" height="42">

你可以用jquery得到这个数字:

$('img').on('click',function(){
    var n = $('this').data('image-n');
});

答案 4 :(得分:-1)

您可以使用以下代码使用ajax和jquery保存:

$.ajax({
            url :   "your-url-here",
            type    :   "POST",
            dataType:       "JSON",
            data    :   ({param1:1,param2:2,....}),
            success :   function(data){
                //actions based on response from server side script
                if(data['isValid']== "1"){

                }else if(data['isValid']== "0"){
                }
            }
        });