0

私は jQuery のプログラミングに問題があります。エイリアンのように英語を話す人でも助けてくれることを願っています %)。

ここで見ることができますhttp://www.kinetics.ru/index_kin.html 左側にメニューがあり、下部に PREV と NEXT の 2 つのボタンがあります。メニューは正しく機能していますが、一番下のボタンを機能させる必要があります。たとえば、[次へ] をクリックすると、スタイルが「オン」になっているメニューの次のメニュー ボタンをクリックするコードが必要です。

コードは次のとおりです。

<div class="menu">
        <ul class="nav">
           <li id="main"><a href="#about"><img src="img/menu/about.png" /></a></li>
           <li><a href="#uslugi"><img src="img/menu/uslugi.png"/></a></li>
           <li><a href="#portfolio"><img src="img/menu/portfolio.png"/></a></li>
           <li><a href="#clients"><img src="img/menu/clients.png"/></a></li>
           <li><a href="#contacts"><img src="img/menu/contacts.png"/></a></li>
        </ul>
    </div>
...
<div class="bottomNav" style="position: absolute; z-index: 11">
<div style="height: 26px; width:98px; margin:-75px 0 0 500px; position: fixed" class="back"><img src="img/back.png"</div>
<div style="height: 26px; width:114px; margin:-25px 0 0 600px; position: fixed" id="next"><img src="img/forward.png"</div>

そして、次のbtnのjQueryコードが機能していません：

$('bottomNav, #next img').click(function(){
    if ($('ul.nav').find('img').hasClass('on')){
        $('ul.nav').next().click();
    }
});

また、私はこのようにしようとしました：

    $('bottomNav, #next img').click(function(){
    $('ul.nav img').click(function(){
        if ($(this).hasClass('on')){
            $(this).next().click();}
    });
});

PS初心者の質問で申し訳ありません。仕事でサイトを作る仕事をもらったばかりですが、デザイナーがウェブデザイナーと同じではないことを誰も気にしません. 最初に学ぶ可能性はありません。学びながら同時に行う必要があります。

4

2 に答える 2

1

jQuery セレクターと HTML コードを確認する必要がありますが、これはひどく間違っています。Firebug さんのコメント：

ここに画像の説明を入力

私はあなたのコードを適切な方法で修正しました：

<div class="bottomNav" style="position: absolute; z-index: 11">
    <div id="prev" style="height: 26px; width:98px; margin:-75px 0 0 500px; position: fixed">
        <img src="img/back.png" />
    </div>
    <div id="next" style="height: 26px; width:114px; margin:-25px 0 0 600px; position: fixed" >
        <img src="img/forward.png" />
    </div>
</div>

JavaScript (非常に単純で、私はテストしていませんが、アイデアが得られるはずです)。

$('#prev').click(function () {
    var $activeLi = getActiveLi();
    var $prevLi = $parentLi.prev();

    if ($prevLi.length > 0) {
        $prevLi.find('a').click();
    }
});

$('#next').click(function () {
    var $activeLi = getActiveLi();
    var $nextLi = $parentLi.next();

    if ($nextLi.length > 0) {
        $nextLi.find('a').click();
    }
}); 

function getActiveLi() {
    var $activeImg = $('.menu .nav img.on');
    var $activeLi = $activeImg.closest('li');

    return $activeLi;
};

しかし、真剣に: Web サイトの開発を続ける前に、jQuery の使い方と HTML の構造を真剣に学ぶことに真剣に取り組む必要があります...

于 2013-01-11T15:43:24.060 に答える
0

解決しました！ありがとうございました！あなたのコードは本当に役に立ちました。私は自分のニーズに合わせて少し変更し、ラインも変更しました

var $activeLi = $activeImg.closest('li');

親（「li」）に最も近い（「li」）、そのように機能していなかったからです。

したがって、コードは次のようになります。

$('#prev').click(function () {
    var $prevLi = getActiveLi().prev();
    if ($prevLi.length > 0){$prevLi.find('img').click();}
});

$('#next').click(function () {
    var $nextLi = getActiveLi().next();
    if ($nextLi.length > 0){$nextLi.find('img').click();}
});

function getActiveLi() {
var $activeImg = $('.menu .nav img.on');
var $activeLi = $activeImg.parents('li');
return $activeLi;
};

また、firebug がコードで非常に大きな災害を示していた理由を理解したと思います... タグを閉じるのを忘れていました :)))

とにかく...どうもありがとう！

PS jQueryに関する巨大な本を読んで3日目:)

于 2013-01-14T14:02:41.970 に答える