调试没有找到错误...奇怪

时间：2017-05-02 15:55:35

标签： javascript jquery

我越来越疯了...脚本中有一个错误但是我找不到它，奇怪的是，探险家的调试也找不到它！

我用这个练习很多时间，但是我找不到它。

＆＃13;
＆＃13; 
<script src="../_js/jquery.min.js"></script>
<script>
$(document).ready(function() {
		
$('#gallery img').each(function(i) {
	var imgFile = $(this).attr('src');
	var preloadImage = new Image();
	var imgExt = /(\.\w{3,4}$)/;
	preloadImage.src = imgFile.replace(imgExt,'_h$1');
		
	$(this).hover(
		function() {
			$(this).attr('src', preloadImage.src);
		},
		function () {
		var currentSource=$(this).attr('src');
			$(this).attr('src', imgFile);
	}); // end hover
}); // end each
	
$('#gallery a').click(function(evt){
	evt.preventDefault();
	var imgPath = $(this).attr('href');

var oldImage = $('#photo img');
var newImage = $('<img src"' + imgPath +'">');
newImage.hide();
$('#photo').prepend(newImage);
newImage.fadeIn(1000);
oldImage.fadeOut(1000,function(){
	$(this).remove();
}); //end fadeout
});// end click
$('#gallery a:first').click();

}); // end ready
</script>
＆＃13; 
<style>
#gallery {
	float: left;
	width: 90px;
	margin-right: 30px;
	margin-left: 10px;
	border-right: white 1px dotted;
}
#gallery img {
	display: inline-block;
	margin: 0 0 10px 0;
	border: 1px solid rgb(0,0,0);
}
#photo {
	margin-left: 150px;
	position: relative;
}
#photo img {
	position: absolute;
}
</style>
＆＃13; 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rollover Images</title>
<link href="../_css/site.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
	<header>
    JAVASCRIPT <span class="amp">&amp;</span> jQUERY: THE&nbsp;MISSING&nbsp;MANUAL
	</header>
	<div class="content">
		<div class="main">
			<h1>Slideshow</h1>
			<div id="gallery"> <a href="../_images/large/slide1.jpg"><img src="../_images/small/slide1.jpg" width="70" height="70" alt="golf balls"></a> <a href="../_images/large/slide2.jpg"><img src="../_images/small/slide2.jpg" width="70" height="70" alt="rock wall"></a> <a href="../_images/large/slide3.jpg"><img src="../_images/small/slide3.jpg" width="70" height="70" alt="old course"></a> <a href="../_images/large/slide4.jpg"><img src="../_images/small/slide4.jpg" width="70" height="70" alt="tees"></a> <a href="../_images/large/slide5.jpg"><img src="../_images/small/slide5.jpg" width="70" height="70" alt="tree"></a> <a href="../_images/large/slide6.jpg"><img src="../_images/small/slide6.jpg" width="70" height="70" alt="ocean course"></a></div>
			<div id="photo"></div>
		</div>
	</div>
	<footer>
    <p>JavaScript &amp; jQuery: The Missing Manual, 3rd Edition, by <a href="http://sawmac.com/">David McFarland</a>. Published by <a href="http://oreilly.com/">O'Reilly Media, Inc</a>.</p>
	</footer>
</div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：0)

你有语法错误，我已经纠正了你的语法错误。 这是无错版本：

$('#gallery a').click(function(evt){
evt.preventDefault();
var imgPath = $(this).attr('href');

var oldImage = $('#photo img');
var newImage = $('<img src"' + imgPath +'">');
newImage.hide();
$('#photo').prepend(newImage);
newImage.fadeIn(1000);
oldImage.fadeOut(1000,function(){
    $(this).remove();
}); //end fadeout
});// end click
$('#gallery a:first').click(function () {
  console.log("something")
});

如果你想要好的答案，你应该发布你的HTML和预期的行为。

编辑：更新问题后，您可以使用解决方案：

＆＃13;
＆＃13; 
$(document).ready(function() {
    $('#gallery img').each(function() {
           var imgFile = $(this).attr('src');
         var preloadImage = new Image();
         var imgExt = /(\.\w{3,4}$)/;
         preloadImage.src = imgFile.replace(imgExt,'_h$1');
        $(this).hover(
                function() {
                   $(this).attr('src', preloadImage.src);
                },
           function() {
                  $(this).attr('src', imgFile);
               }
            ); // end hover
          }); // end each
    $('#gallery a').click(function(evt) {
          evt.preventDefault();
           var imgPath = $(this).attr('href');
           var oldImage = $('#photo img');
           var newImage = $('<img src="' + imgPath + '">');
           newImage.hide();
           $('#photo').prepend(newImage);
           newImage.fadeIn(1000);
            oldImage.fadeOut(1000,function(){
                $(this).remove();
               }); // end fadeout
         }); // end click
     $('#gallery a:first').click();
}); // end ready
＆＃13; 
#gallery {
	float: left;
	width: 90px;
	margin-right: 30px;
	margin-left: 10px;
	border-right: white 1px dotted;
}
#gallery img {
	display: inline-block;
	margin: 0 0 10px 0;
	border: 1px solid rgb(0,0,0);
}
#photo {
	margin-left: 150px;
	position: relative;
}
#photo img {
	position: absolute;
}
＆＃13; 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="wrapper">
    <header>
        JAVASCRIPT <span class="amp">&amp;</span> jQUERY: THE&nbsp;MISSING&nbsp;MANUAL
    </header>
    <div class="content">
        <div class="main">
            <h1>Slideshow</h1>
            <div id="gallery">
                <a href="https://placeholdit.imgix.net/~text?txtsize=33&txt=one&w=500&h=500"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=one&w=70&h=70" width="70" height="70" alt="golf balls"></a>
                <a href="https://placeholdit.imgix.net/~text?txtsize=33&txt=two&w=500&h=500"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=two&w=70&h=70" width="70" height="70" alt="rock wall"></a>
                <a href="https://placeholdit.imgix.net/~text?txtsize=33&txt=three&w=500&h=500"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=three&w=70&h=70" width="70" height="70" alt="old course"></a>
                <a href="https://placeholdit.imgix.net/~text?txtsize=33&txt=four&w=500&h=500"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=four&w=70&h=70" width="70" height="70" alt="tees"></a>
                <a href="https://placeholdit.imgix.net/~text?txtsize=33&txt=five&w=500&h=500"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=five&w=70&h=70" width="70" height="70" alt="tree"></a>
                <a href="https://placeholdit.imgix.net/~text?txtsize=33&txt=six&w=500&h=500"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=six&w=70&h=70" width="70" height="70" alt="ocean course"></a>
            </div>
            <div id="photo"></div>
        </div>
    </div>
    <footer>
        <p>JavaScript &amp; jQuery: The Missing Manual, 3rd Edition, by <a href="http://sawmac.com/">David McFarland</a>. Published by
            <a href="http://oreilly.com/">O'Reilly Media, Inc</a>.</p>

    </footer>
</div>
＆＃13;
＆＃13;
＆＃13;

指向笔的链接：https://codepen.io/faw/pen/MmoQRe?editors=1111

答案 1 :(得分：0)

// end ready部分是指$(document).ready(function() {。

您的代码必须是：

＆＃13;
＆＃13; 
$(document).ready(function() {
  $('#gallery a').click(function(evt) {
    evt.preventDefault();
    var imgPath = $(this).attr('href');

    var oldImage = $('#photo img');
    var newImage = $('<img src"' + imgPath + '">');
    newImage.hide();
    $('#photo').prepend(newImage);
    newImage.fadeIn(1000);
    oldImage.fadeOut(1000, function() {
      $(this).remove();
    }); //end fadeout
  }); // end click
  $('#gallery a:first').click();
}); // end ready
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

好的最后我发现错误就是这一行 var newImage = $（＆＃39;＆＃39;）; 我错过了src之后的=

由于

相关问题
最新问题