Javascript图像onclick函数_Javascript_Jquery_Html

Javascript图像onclick函数

javascript jquery html

Javascript图像onclick函数,javascript,jquery,html,Javascript,Jquery,Html,我已经创建了一个javasript代码，以便在单击图像时执行。我写的代码如下，但它不工作，有人可以帮助我使这项工作无标题函数单击（）{ if（a.document.getElementById==“right”） { document.getElementById（'aswE'）.src='10〕http://icons.iconarchive.com/icons/fasticon/nature/256/White-Flower-icon.png' ; } 其他的 { document.

我已经创建了一个javasript代码，以便在单击图像时执行。我写的代码如下，但它不工作，有人可以帮助我使这项工作


无标题
函数单击（）{
if（a.document.getElementById==“right”）
{
document.getElementById（'aswE'）.src='10〕http://icons.iconarchive.com/icons/fasticon/nature/256/White-Flower-icon.png' ;
}
其他的
{
document.getElementById（'aswE'）.src='10〕https://cdn3.iconfinder.com/data/icons/flowers-stroke-1/100/flowers_flower_bloom-42-256.png' ;
}
$（'img.answr'）.hide（）；
返回false；
}

因为您使用的是Jquery，所以不要使用document.getElementById（）方法。使用Jquery内部的选择器引擎，它具有强大的跨浏览器支持

HTML

您必须为该img和GetElementsByCassName使用类，因为有多个id具有相同的名称，并且标记中没有任何id，您在img标记中有palce id，更改javascript和HTML中的一些代码。

这很有效

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

<body>

    <img id="aswE" src="http://www.bigmomentfilms.com/wp-content/uploads/2015/09/Daisy-flowers.jpg" alt="Elep_ant" border="5" />
    </br>
    <img class="answr" src="http://images.all-free-download.com/images/graphiclarge/orange_flower_115.jpg" width="103" height="99" />
    <img class="answr" id="correct" src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/quilted-floral-icons-natural-wonders/053719-quilted-floral-icon-natural-wonders-flower2.png" width="103" height="99" />   
    <img class="answr" src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/magic-marker-icons-natural-wonders/115597-magic-marker-icon-natural-wonders-flower17.png" width="103" height="99"/>  
    <img class="answr" src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/blue-chrome-rain-icons-natural-wonders/050122-blue-chrome-rain-icon-natural-wonders-flower17.png" width="103" height="99" />

</body>

<script>
    $('.answr').click(function(){
        if ( $(this).attr('id') === 'correct' ) {
            $('#aswE').attr('src', 'http://icons.iconarchive.com/icons/fasticon/nature/256/White-Flower-icon.png');
        } else {
            $('#aswE').attr('src', 'https://cdn3.iconfinder.com/data/icons/flowers-stroke-1/100/flowers_flower_bloom-42-256.png');
        }

        $('.answr').hide();
    });
</script>

</html>


无标题


$（'.answr'）。单击（函数（）{
if（$（this.attr（'id'）='correct'）{
$（'aswE'）.attr（'src'，'http://icons.iconarchive.com/icons/fasticon/nature/256/White-Flower-icon.png');
}否则{
$（'aswE'）.attr（'src'，'https://cdn3.iconfinder.com/data/icons/flowers-stroke-1/100/flowers_flower_bloom-42-256.png');
}
$（'.answr'）.hide（）；
});

注意：此版本的脚本必须在加载正文之后出现，因为它将查找任何具有类“answr”的内容，并向其绑定一个单击函数。如果在主体之前加载，它将找不到任何内容。

好的，您的问题是因为无法重命名函数

单击（）。这与javascript格式化冲突。我已将您的函数重命名为clicks（）
，并使用this
传递参数中的元素对象
点击（这个）
现在我检查children元素是否具有良好的id
现在是工作了。请试一试


无标题
功能点击{
如果（s.children[0]=“右”）
{
document.getElementById（'aswE'）.src='10〕http://icons.iconarchive.com/icons/fasticon/nature/256/White-Flower-icon.png' ;
}
其他的
{
document.getElementById（'aswE'）.src='10〕https://cdn3.iconfinder.com/data/icons/flowers-stroke-1/100/flowers_flower_bloom-42-256.png' ;
}
$（“img.answr”）.hide（）；
返回false；
}
id应该是唯一的如果（a.document.getElementById==“right”）

这一行没有任何错误，请在jsfiddle和addAgree@Dinesh Kanivu中执行，并且不需要放置标签。

$('#img1').click(function(){
    $('#img2').show();
});

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

<body>

    <img id="aswE" src="http://www.bigmomentfilms.com/wp-content/uploads/2015/09/Daisy-flowers.jpg" alt="Elep_ant" border="5" />
    </br>
    <img class="answr" src="http://images.all-free-download.com/images/graphiclarge/orange_flower_115.jpg" width="103" height="99" />
    <img class="answr" id="correct" src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/quilted-floral-icons-natural-wonders/053719-quilted-floral-icon-natural-wonders-flower2.png" width="103" height="99" />   
    <img class="answr" src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/magic-marker-icons-natural-wonders/115597-magic-marker-icon-natural-wonders-flower17.png" width="103" height="99"/>  
    <img class="answr" src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/blue-chrome-rain-icons-natural-wonders/050122-blue-chrome-rain-icon-natural-wonders-flower17.png" width="103" height="99" />

</body>

<script>
    $('.answr').click(function(){
        if ( $(this).attr('id') === 'correct' ) {
            $('#aswE').attr('src', 'http://icons.iconarchive.com/icons/fasticon/nature/256/White-Flower-icon.png');
        } else {
            $('#aswE').attr('src', 'https://cdn3.iconfinder.com/data/icons/flowers-stroke-1/100/flowers_flower_bloom-42-256.png');
        }

        $('.answr').hide();
    });
</script>

</html>