0

我正在学习 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);
        }
    });
});
4

1 回答 1

0

src当您第一次单击时，您正在检查属性值，src == './images/me.jpg'但您正在根据完整路径检查它。

尝试

var source = "./images/me.jpg";
var source1 = "./images/me1.jpg";
于 2013-08-22T03:24:18.180 回答