Question

我创建了一个javasript代码，可以在图片点击时执行。我编写的代码如下，但它不起作用，任何人都可以帮助我完成这项工作

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Untitled</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" media="screen" href="css/reset.css">
        <link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
        <link rel="stylesheet" type="text/css" media="screen" href="css/grid_12.css">
        <link rel="stylesheet" type="text/css" media="screen" href="css/slider.css">
        <link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:400,700' rel='stylesheet' type='text/css'>
        <script src="js/jquery-1.7.min.js"></script>
        <script src="js/jquery.easing.1.3.js"></script>
        <script src="js/tms-0.4.1.js"></script>
        <script>

    function click(){
    if(a.document.getElementById=="right")
    {
    document.getElementById('aswE').src='http://icons.iconarchive.com/icons/fasticon/nature/256/White-Flower-icon.png' ;
    }
    else
    {
    document.getElementById('aswE').src='https://cdn3.iconfinder.com/data/icons/flowers-stroke-1/100/flowers_flower_bloom-42-256.png' ;
    }
    $('img.answr').hide();
    return false;
    	}

    	</script>
    	<body>
      <div class="main">
     <div class="container_12">	
        <table border="0"><tr>
      <td>
     
    <img src="http://www.bigmomentfilms.com/wp-content/uploads/2015/09/Daisy-flowers.jpg" alt="Elep_ant" border="5" /></td><td><img src="" alt="" name="aswE" width="103" height="99" id="aswE" />
    </br>
    <a href="#" onclick="click()">    
    <img class="answr" src=""http://images.all-free-download.com/images/graphiclarge/orange_flower_115.jpg" id="wrong" /></a>
    <a href="#" onclick="click()">    
    <img class="answr" 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" id="right" width="103" height="99" /></a>
    <a href="#" onclick="click()">    
    <img 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" id="wrong" width="103" height="99"/></a>
    <a href="#" onclick="click()">    
    <img 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" id="wrong" width="103" height="99" /></a>
    <a href="#" onclick="click()">    
    <img src="http://images.all-free-download.com/images/graphiclarge/orange_flower_115.jpg" id="wrong" width="103" height="99"/></a></td></tr></table>



     </div>
              <div class="clear"></div>
            </div>
        </section>    
       </div>      
    </body>
    </html>

因为我希望这个javascript加载关于点击图像的另一个图像，当用户点击图像时，所有四个图像必须隐藏，直到再次重新加载页面

Answer 1

由于您使用的是Jquery，因此请不要使用document.getElementById（）方法。在Jquery中使用选择器引擎，它具有很好的跨浏览器支持。

HTML

loginModule

Jquery的

<img src="image1.jpg" id="img1"> // make sure ID's are unique
<img src="image2.jpg" id="img2" style="display:none;">

Click here to see JSfiddle demo

Answer 2

这有效

<!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>

注意：这个版本的脚本必须在加载正文之后才会出现，因为它会查找任何带有类＆＃34;回答＆＃34;并将单击函数绑定到它。如果它在身体之前被加载，它将一无所获。

Answer 3

好的问题是因为您无法重命名您的功能click()。这与javascript格式化冲突。我已将您的函数重命名为clicks()，并使用this

传递参数中的元素对象

点击（本）

现在我检查children元素是否具有良好的id。

现在它的工作。请尝试

＆＃13;

<!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Untitled</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" media="screen" href="css/reset.css">
        <link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
        <link rel="stylesheet" type="text/css" media="screen" href="css/grid_12.css">
        <link rel="stylesheet" type="text/css" media="screen" href="css/slider.css">
        <link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:400,700' rel='stylesheet' type='text/css'>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="js/jquery.easing.1.3.js"></script>
        <script src="js/tms-0.4.1.js"></script>
        <script>

    function clicks(s){

    if(s.children[0]=="right")
    {
    document.getElementById('aswE').src='http://icons.iconarchive.com/icons/fasticon/nature/256/White-Flower-icon.png' ;
    }
    else
    {
    document.getElementById('aswE').src='https://cdn3.iconfinder.com/data/icons/flowers-stroke-1/100/flowers_flower_bloom-42-256.png' ;
      
    }

    $("img.answr").hide();
    return false;
    	}

    	</script>
    	<body>
      <div class="main">
     <div class="container_12">	
        <table border="0"><tr>
      <td>
     
    <img src="http://www.bigmomentfilms.com/wp-content/uploads/2015/09/Daisy-flowers.jpg" alt="Elep_ant" border="5" /></td><td><img src="" alt="" name="aswE" width="103" height="99" id="aswE" />

    <a href="#" onclick="clicks(this)">    
    <img class="answr" src="http://images.all-free-download.com/images/graphiclarge/orange_flower_115.jpg" id="wrong" /></a>
    <a href="#" onclick="clicks(this)">    
    <img class="answr" 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" id="right" width="103" height="99" /></a>
    <a href="#" onclick="clicks(this)">    
    <img 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" id="wrong" width="103" height="99"/></a>
    <a href="#" onclick="clicks(this)">    
    <img 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" id="wrong" width="103" height="99" /></a>
    <a href="#" onclick="clicks(this)">    
    <img src="http://images.all-free-download.com/images/graphiclarge/orange_flower_115.jpg" id="wrong" width="103" height="99"/></a>
          </td>
       </tr>
       </table>



     </div>
              <div class="clear"></div>
            </div>
        </section>    
       </div>      
    </body>
    </html>

＆＃13;

您可以在此处找到有关保留字的更多详细信息：http://www.w3schools.com/js/js_reserved.asp

Answer 4

你必须为那个img和getElementsByClassName使用类，因为有多个同名的id，并且标签中没有任何id，你在img标签中有palce id，在javascript和HTML中更改一些代码。

Javascript图片onclick函数

4 个答案: