2

私はJavaScriptに比較的慣れていないので、一日中問題に頭を悩ませてきました。誰かが私を正しい方向に向けてくれることを望んでいます。

スライドショーを行うPHPスクリプトがあります。別のJavaScript関数への動的リンクを含む[次へ]ボタンと[前へ]ボタンがあります。キーボードの矢印キーでトリガーする方法を見つけたいと思っています。

これまでのところ、矢印キーで特定のURLを起動する方法を見つけましたが、今は少し苦労しています。ページ上でDIVを非表示および表示した結果、ターゲットURLが変更されます。だから私は次のいずれかを行う必要があると思います：

ページを更新せずに、ページの本体の後半でPHP変数内に構築されたURLを使用してこのコードをトリガーします。

<script type="text/javascript">

$(document).keydown(function(e){

 //e.which is set by jQuery for those browsers that do not normally support e.keyCode.
 var keyCode = e.keyCode || e.which;

if (keyCode == 37)
 {
 window.location = 'http://www.domain.com/previous-image.jpg';
 return false;
 }

 if (keyCode == 39)
 {
 window.location = 'http://www.domain.com/next-image.jpg';
 return false;
 }

});

</script>

...または、特定の名前のDIV内でリンクをトリガーする方法を見つける必要がありますが、DIVが非表示になっていない場合に限ります。

任意のポインタをいただければ幸いです。

編集：10/10/12

これまでの皆さんの助けに感謝します。私はもう少し理解しました、そして私はおそらく私が達成しようとしていることをより明確にすることができます。

5つのDIVがあるページがあります。そのうちの4つは非表示になっています。表示されている画像を除いて、それぞれ同じです。次のコードを使用して、さまざまなDIVを表示または非表示にします。http：//jsfiddle.net/edzpgt/ZhjRc/12/

ページをナビゲートするには矢印キーを使用する必要があるため、すでに説明したように、これにJqueryを追加します：http：//jsfiddle.net/edzpgt/b2bWz/3/

私には2つの問題があると思います：1。表示されているDIVからの矢印キーリンクのみを使用していることを確認するために、構文が正しいかどうかわかりません。2. Jqueryに渡される正しい宛先URLを取得するために、次/前のページ番号変数を正しく設定または使用しているとは思いません。

誰か助けてもらえますか？

4

3 に答える 3

1

1）を処理する必要はありませんe.keyCode || e.which。jQueryはあなたのためにそれを行います。使用するだけe.which

2）他の場所から呼び出すことができるように、ハンドラーの外部で2つの関数を作成することをお勧めします。

function previousLocation() {
    window.location = 'http://www.domain.com/previous-image.jpg';
}

function nextLocation() {
    window.location = 'http://www.domain.com/next-image.jpg';
}

$(document).keydown(function (e) {
    var keyCode = e.which;

    if (keyCode == 37) {
        previousLocation();
        return false;
    }

    if (keyCode == 39) {
        nextLocation();
        return false;
    }

});

3）しかし、本当にトリガーする必要がある場合-ここに例があります：

$(document).keydown(function (e) {
    var keyCode = e.which;

    function previousLocation() {
        window.location = 'http://www.domain.com/previous-image.jpg';
    }

    function nextLocation() {
        window.location = 'http://www.domain.com/next-image.jpg';
    }

    $(document).bind('goprev', previousLocation);
    $(document).bind('gonext', nextLocation);

    if (keyCode == 37) {
        previousLocation(); // no problems here
        return false;
    }

    if (keyCode == 39) {
        nextLocation(); // no problems here
        return false;
    }

});

// external call example
$(document).trigger('goprev');
$(document).trigger('gonext');
于 2012-10-08T16:33:00.627 に答える
0

jQuery には便利な.trigger()機能があります。

if (keyCode == 37)
 {
 $("#next").trigger("click");
 return false;
 }

 if (keyCode == 39)
 {
 $("#prev").trigger("click");
 return false;
 }

次のリンクと前のリンクの有効なセレクターで#nextandを置き換える必要があります。#previousHTML がないので、それらをプレースホルダーとして使用しました。

例：

HTML

​&lt;a href="#" rel="next">next</a>
<a href="#" rel="prev">prev</a>​

jQuery

    $(document).keydown(function(e){
      //e.which is set by jQuery for those browsers that do not normally support e.keyCode.
      var keyCode = e.keyCode || e.which;

      if (keyCode == 37)
      {
       $("a[rel='prev']").trigger("click");
       return false;
      }
     else if (keyCode == 39)
     {
       $("a[rel='next']").trigger("click");
       return false;
     }
   });
   $("a[rel='next']").click(function(){
      alert("next");
   });

   $("a[rel='prev']").click(function(){
      alert("prev");
   });
于 2012-10-08T16:28:53.137 に答える
0

aタグは2つになります。1 つは次のもの、もう 1 つは前のものです。したがって、最初にそれらを見つける必要があります。それらが idnextSlideとprevSlideであるとします。

<a id="prevSlide" href="http://www.domain.com/previous-image.jpg">Previous</a>
<a id="nextSlide" href="http://www.domain.com/next-image.jpg">Next</a>

以下のようにコードを書き直しました

$(document).keydown(function(e){

 //e.which is set by jQuery for those browsers that do not normally support e.keyCode.
 var keyCode = e.keyCode || e.which;

if (keyCode == 37)
 {
 window.location  = $("#prevSlide").attr("href");
 return false;
 }

 if (keyCode == 39)
 {
 window.location  = $("#nextSlide").attr("href");
 return false;
 }

});
于 2012-10-08T16:29:53.390 に答える