Question

我正在学习JQuery，当我将if条件放入click（）函数时，会发生一些奇怪的事情。如果我在if之前发出警报，则会在第一次单击时触发警报，但是if将需要2才能启动。一旦if触发，在此之后只需点击一下，直到刷新页面。 if基本上检查以查看当前图像的来源（2个），并在每次单击图像时将其交换到另一个。有人能告诉我为什么会这样吗？

代码：

（HTML）

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!--<script type="text/javascript" src="js/index.js"></script>-->
<script src="jquery/jq.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="grid">
    <div id="top">
        <img src="./images/me.jpg" id="1" class="pic1" onClick="flip(1)">
        <img src="./images/me.jpg" id="2" class="pic1" onClick="flip(2)">
        <img src="./images/me.jpg" id="3" class="pic1" onClick="flip(3)">
    </div>
    <div id="mid">
        <img src="./images/me.jpg" id="4" class="pic2" onClick="flip(4)">
        <img src="./images/me.jpg" id="5" class="pic2" onClick="flip(5)">
        <img src="./images/me.jpg" id="6" class="pic2" onClick="flip(6)">
    </div>
    <div id="bottom">
        <img src="./images/me.jpg" id="7" class="pic3" onClick="flip(7)">
        <img src="./images/me.jpg" id="8" class="pic3" onClick="flip(8)">
        <img src="./images/me.jpg" id="9" class="pic3" onClick="flip(9)">
    </div>
</div>

（JQuery的）

/ * * Jquery函数的 * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * *** /

var source = "file:///Users/Matt/Documents/Test_Web/images/me.jpg";
var source1 = "file:///Users/Matt/Documents/Test_Web/images/me1.jpg";
$(document).ready(function() {
    $("#1").click(function(){
        if($(this).attr('src') == source){
            $(this).attr('src',source1);
        }
        else
        {
            $(this).attr('src',source);
        }
    });
    $("#2").click(function(){
        if($(this).attr('src') == source){
            $(this).attr('src',source1);
        }
        else
        {
            $(this).attr('src',source);
        }
    });
    $("#3").click(function(){
        if($(this).attr('src') == source){
            $(this).attr('src',source1);
        }
        else
        {
            $(this).attr('src',source);
        }
    });
    $("#4").click(function(){
        if($(this).attr('src') == source){
            $(this).attr('src',source1);
        }
        else
        {
            $(this).attr('src',source);
        }
    });
    $("#5").click(function(){
        if($(this).attr('src') == source){
            $(this).attr('src',source1);
        }
        else
        {
            $(this).attr('src',source);
        }
    });
    $("#6").click(function(){
        if($(this).attr('src') == source){
            $(this).attr('src',source1);
        }
        else
        {
            $(this).attr('src',source);
        }
    });
    $("#7").click(function(){
        if($(this).attr('src') == source){
            $(this).attr('src',source1);
        }
        else
        {
            $(this).attr('src',source);
        }
    });
    $("#8").click(function(){
        if($(this).attr('src') == source){
            $(this).attr('src',source1);
        }
        else
        {
            $(this).attr('src',source);
        }
    });
    $("#9").click(function(){
        if($(this).attr('src') == source){
            $(this).attr('src',source1);
        }
        else
        {
            $(this).attr('src',source);
        }
    });
});

Answer 1

当您第一次点击src时，您正在检查src == './images/me.jpg'属性值，但是您是在完整路径上进行检查。

尝试

var source = "./images/me.jpg";
var source1 = "./images/me1.jpg";

如果JQuery click（）函数中的条件需要点击2次，那么if块之外的任何内容都会在第一次单击时触发

1 个答案: