Question

我正在学习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>

Answer 1

变化：

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

为：

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

<强> jsFiddle example

Answer 2

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

prev函数仅匹配当前元素之前的第一个兄弟，然后才匹配选择器。在这种情况下，你添加了一个插入元素，锚标记，因此div不再是前面的第一个兄弟，而选择器不匹配。 PrevAll认为所有前面的兄弟姐妹都与选择器匹配。在你的情况下，只有一个。如果您进一步更改标记以引入其他div，则必须调整选择器以从集合中选择合适的标记。

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

添加链接时，JQuery停止工作

2 个答案: