如果JQuery click（）函数中的条件需要点击2次才能触发，但是if块之外的所有内容都会在首次点击时触发

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 == './images/me.jpg'时，您正在检查src属性值，但要对照完整路径进行检查。

尝试

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

如果JQuery click（）函数中的条件需要点击2次才能触发，但是if块之外的所有内容都会在首次点击时触发

问题描述

1 个解决方案

解决方案1
0 已采纳 2013-08-22 03:24:18

如果JQuery click（）函数中的条件需要点击2次才能触发，但是if块之外的所有内容都会在首次​​点击时触发

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-08-22 03:24:18

如果JQuery click（）函数中的条件需要点击2次才能触发，但是if块之外的所有内容都会在首次点击时触发

解决方案1
0 已采纳 2013-08-22 03:24:18