0

我正在学习 JQuery 并且正在使用通过图片滑动文本的 JQuery 脚本：

<script>
        $(document).ready(function() {
            var currentImg = 1,
                totalImages = 4
                loopTime = 1000,
                intervalId = null;


            function displayTitle(imgNbr) {
                $('.title').hide();
                $('#image'+imgNbr).prev('div').show();
            }

            $('img').on('mouseover', function() {
                clearInterval(intervalId);
                displayTitle($(this).parent().attr('id').substring(5));
            }).on('mouseout', function() {
                currentImg = $(this).parent().attr('id').substring(5);
                startLoop();
            })

            function startLoop() {
                intervalId = setInterval(function() {
                    displayTitle(currentImg);
                    currentImg = ((currentImg == totalImages) ? 1 : parseInt(currentImg)+1);
                }, loopTime);
            }
            startLoop();
        });
   </script>

但是当我尝试在 [div] 和图像标签之间添加 [a href="#"] 标签时，它会停止工作。你能帮我修一下吗？谢谢。

<div class="imgcontainer">
    <div class="title">title 1</div>
    <div class="img" id="image1"><a href="#"><img src="images/image1.jpg" /></a></div>
</div>

<div class="imgcontainer">
    <div class="title">title 2</div>
    <div class="img" id="image2"><a href="#"><img src="images/image2.jpg" /></a></div>
</div>    

<div class="imgcontainer">
    <div class="title">title 3</div>
    <div class="img" id="image3"><a href="#"><img src="images/image3.jpg" /></a></div>
</div>
4

2 回答 2

2

改变：

displayTitle($(this).parent().attr('id').substring(5));

至：

displayTitle($(this).parents('div').attr('id').substring(5));

jsFiddle 示例。

于 2012-06-24T16:04:48.523 回答
1

它停止工作，因为 div 不再是前面的兄弟。您应该更改调用以用于prevAll('div')选择与 div 选择器匹配的所有前面的兄弟姐妹。

该prev函数仅匹配当前元素之前的第一个兄弟元素，并且仅在它匹配选择器时才匹配。在这种情况下，您添加了一个中间元素，即锚标记，因此 div 不再是前面的第一个同级元素，并且选择器不匹配任何内容。 PrevAll考虑与选择器匹配的所有前面的兄弟。在你的情况下，只有一个。如果您进一步更改标记以引入其他 div，则必须调整选择器以从集合中选择合适的一个。

function displayTitle(imgNbr) {
    $('.title').hide();
     $('#image'+imgNbr).prevAll('div').show();
}
于 2012-06-24T16:03:59.307 回答