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]タグとimageタグの間に[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セレクターに一致する先行するすべての兄弟を考慮します。あなたの場合、1つだけです。追加のdivを導入するためにマークアップをさらに変更する場合は、セットから適切なものを選択するようにセレクターを調整する必要があります。

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