0

私は JQuery を学んでいますが、if 条件を click() 関数に入れると、奇妙なことが起こります。if の直前にアラートを配置すると、最初のクリックでアラートが発生しますが、if が開始されるまでに 2 時間かかります。if が発生すると、その後はページが更新されるまで 1 回クリックするだけです。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>

(Jクエリ)

/* * 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 に答える